@herdingbits/trailhead-webawesome 0.2.0 → 0.3.0

package/dist/adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,WAAW,EAAuC,MAAM,uCAAuC,CAAC;AAuJ9L,MAAM,WAAW,uBAAuB;IACtC,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAA0B;gBAEtC,MAAM,CAAC,EAAE,uBAAuB;IAMtC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAkB5C"}
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,WAAW,EAAuC,MAAM,uCAAuC,CAAC;AAsM9L,MAAM,WAAW,uBAAuB;IACtC,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAA0B;gBAEtC,MAAM,CAAC,EAAE,uBAAuB;IAMtC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAkB5C"}

package/dist/adapter.js

@@ -1,29 +1,64 @@
+const TOAST_ICONS = {
+    success: "circle-check",
+    error: "circle-exclamation",
+    warning: "triangle-exclamation",
+    info: "circle-info",
+};
+// wa-callout has no "error"/"info" variant — map onto its brand/danger vocabulary.
+function toastCalloutVariant(variant) {
+    if (variant === "error")
+        return "danger";
+    if (variant === "info")
+        return "brand";
+    return variant;
+}
+// DialogButton.variant is a free-form string set by callers (only "primary"/"secondary" are
+// used anywhere in practice); map it onto wa-button's variant/appearance vocabulary.
+function dialogButtonAppearance(variant) {
+    if (variant === "primary")
+        return { variant: "brand", appearance: "filled" };
+    if (variant === "secondary")
+        return { variant: "neutral", appearance: "outlined" };
+    return { variant: "neutral", appearance: "plain" };
+}
 class WebAwesomeFeedbackAdapter {
     constructor() {
-        this.busyOverlay = null;
+        this.busyDialog = null;
+        this.busyActive = false;
         this.toastContainer = null;
     }
     showBusy(message) {
-        if (!this.busyOverlay) {
-            this.busyOverlay = document.createElement("div");
-            this.busyOverlay.id = "shell-busy-overlay";
-            this.busyOverlay.innerHTML = `
+        if (!this.busyDialog) {
+            const dialog = document.createElement("wa-dialog");
+            dialog.setAttribute("without-header", "");
+            dialog.className = "shell-busy-dialog";
+            dialog.innerHTML = `
         <div class="shell-busy-content">
-          <div class="shell-spinner"></div>
+          <wa-spinner></wa-spinner>
           <div class="shell-busy-message"></div>
         </div>
       `;
-            document.body.appendChild(this.busyOverlay);
+            // Busy is a blocking state — Escape (or any other close trigger) must not dismiss it
+            // early; only our own clearBusy() call is allowed to close it. See "Preventing the
+            // Dialog from Closing" in the wa-dialog docs.
+            dialog.addEventListener("wa-hide", (e) => {
+                if (this.busyActive)
+                    e.preventDefault();
+            });
+            document.body.appendChild(dialog);
+            this.busyDialog = dialog;
         }
-        const messageEl = this.busyOverlay.querySelector(".shell-busy-message");
+        const messageEl = this.busyDialog.querySelector(".shell-busy-message");
         if (messageEl) {
             messageEl.textContent = message;
         }
-        this.busyOverlay.style.display = "flex";
+        this.busyActive = true;
+        this.busyDialog.open = true;
     }
     clearBusy() {
-        if (this.busyOverlay) {
-            this.busyOverlay.style.display = "none";
+        this.busyActive = false;
+        if (this.busyDialog) {
+            this.busyDialog.open = false;
         }
     }
     showToast(message, variant, duration = 3000) {
@@ -32,9 +67,13 @@ class WebAwesomeFeedbackAdapter {
             this.toastContainer.id = "shell-toast-container";
             document.body.appendChild(this.toastContainer);
         }
-        const toast = document.createElement("div");
-        toast.className = `shell-toast shell-toast-${variant}`;
-        toast.textContent = message;
+        const toast = document.createElement("wa-callout");
+        toast.setAttribute("variant", toastCalloutVariant(variant));
+        toast.setAttribute("appearance", "filled");
+        toast.className = "shell-toast";
+        // "solid" (the default) is the only style free Font Awesome kits are guaranteed to carry —
+        // "regular"/"light"/"thin" are Pro-only and 403 silently on a free kit.
+        toast.innerHTML = `<wa-icon slot="icon" name="${TOAST_ICONS[variant]}"></wa-icon>${message}`;
         this.toastContainer.appendChild(toast);
         setTimeout(() => toast.classList.add("shell-toast-show"), 10);
         setTimeout(() => {
@@ -44,34 +83,40 @@ class WebAwesomeFeedbackAdapter {
     }
     showDialog(config) {
         return new Promise((resolve) => {
-            const dialog = document.createElement("div");
-            dialog.className = "shell-dialog-overlay";
+            let settled = false;
+            const dialog = document.createElement("wa-dialog");
+            if (config.title) {
+                dialog.setAttribute("label", config.title);
+            }
+            else {
+                dialog.setAttribute("without-header", "");
+            }
+            dialog.setAttribute("light-dismiss", "");
+            dialog.className = "shell-dialog";
             dialog.innerHTML = `
-        <div class="shell-dialog">
-          ${config.title ? `<div class="shell-dialog-title">${config.title}</div>` : ''}
-          <div class="shell-dialog-message">${config.message}</div>
-          <div class="shell-dialog-buttons">
-            ${config.buttons
-                .map((btn) => `<button class="shell-btn shell-btn-${btn.variant || "default"}" data-value="${btn.value}">${btn.label}</button>`)
+        <p class="shell-dialog-message">${config.message}</p>
+        ${config.buttons
+                .map((btn) => {
+                const { variant, appearance } = dialogButtonAppearance(btn.variant);
+                return `<wa-button slot="footer" variant="${variant}" appearance="${appearance}" data-value="${btn.value}">${btn.label}</wa-button>`;
+            })
                 .join("")}
-          </div>
-        </div>
       `;
-            dialog.querySelectorAll("button").forEach((btn) => {
-                btn.onclick = () => {
-                    const value = btn.getAttribute("data-value");
-                    dialog.remove();
-                    resolve({ value });
-                };
-            });
-            // Click outside to cancel
-            dialog.onclick = (e) => {
-                if (e.target === dialog) {
-                    dialog.remove();
-                    resolve({ value: null });
-                }
+            const settleOnce = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                resolve({ value });
+                dialog.open = false;
             };
+            dialog.addEventListener("wa-after-hide", () => dialog.remove());
+            // Escape, the header close button, and light-dismiss all fire wa-hide — treat as no selection.
+            dialog.addEventListener("wa-hide", () => settleOnce(null));
+            dialog.querySelectorAll("wa-button[data-value]").forEach((btn) => {
+                btn.addEventListener("click", () => settleOnce(btn.getAttribute("data-value")));
+            });
             document.body.appendChild(dialog);
+            dialog.open = true;
         });
     }
 }
@@ -82,30 +127,37 @@ class WebAwesomeAuthAdapter {
             settle = resolve;
         });
         let settled = false;
-        const dialog = document.createElement("div");
-        dialog.className = "shell-dialog-overlay";
+        const formId = `shell-auth-form-${Math.random().toString(36).slice(2)}`;
+        const dialog = document.createElement("wa-dialog");
+        dialog.setAttribute("label", "Session Expired");
+        dialog.setAttribute("light-dismiss", "");
+        dialog.className = "shell-auth-dialog";
         dialog.innerHTML = `
-      <div class="shell-dialog">
-        <div class="shell-dialog-title">Session Expired</div>
-        <div class="shell-dialog-message">Sign in to continue where you left off.</div>
-        ${errorMessage ? `<div class="shell-dialog-error">${errorMessage}</div>` : ""}
-        <form class="shell-auth-form">
-          <input type="text" name="username" placeholder="Username" autocomplete="username" required />
-          <input type="password" name="password" placeholder="Password" autocomplete="current-password" required />
-          <div class="shell-dialog-buttons">
-            <button type="button" class="shell-btn shell-btn-secondary" data-action="cancel">Cancel</button>
-            <button type="submit" class="shell-btn shell-btn-primary">Sign In</button>
-          </div>
-        </form>
-      </div>
+      <p class="shell-auth-message">Sign in to continue where you left off.</p>
+      ${errorMessage
+            ? `<wa-callout variant="danger" size="small" class="shell-auth-error">
+             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+             ${errorMessage}
+           </wa-callout>`
+            : ""}
+      <form id="${formId}" class="shell-auth-form">
+        <wa-input name="username" label="Username" autocomplete="username" autofocus required></wa-input>
+        <wa-input name="password" type="password" label="Password" autocomplete="current-password" password-toggle required></wa-input>
+      </form>
+      <wa-button slot="footer" appearance="outlined" data-action="cancel">Cancel</wa-button>
+      <wa-button slot="footer" variant="brand" appearance="filled" type="submit" form="${formId}">Sign In</wa-button>
     `;
         const settleOnce = (value) => {
             if (settled)
                 return;
             settled = true;
-            dialog.remove();
             settle(value);
+            dialog.open = false;
         };
+        // wa-dialog owns its own close animation; only remove the element once it's finished.
+        dialog.addEventListener("wa-after-hide", () => dialog.remove());
+        // Escape, the header close button, and light-dismiss all fire wa-hide — treat every one as cancel.
+        dialog.addEventListener("wa-hide", () => settleOnce(null));
         const form = dialog.querySelector("form");
         form.addEventListener("submit", (e) => {
             e.preventDefault();
@@ -116,13 +168,11 @@ class WebAwesomeAuthAdapter {
             });
         });
         dialog.querySelector('[data-action="cancel"]')?.addEventListener("click", () => settleOnce(null));
-        // Click outside to cancel — matches showDialog's existing convention.
-        dialog.onclick = (e) => {
-            if (e.target === dialog)
-                settleOnce(null);
-        };
         document.body.appendChild(dialog);
-        dialog.querySelector('input[name="username"]')?.focus();
+        dialog.open = true;
+        requestAnimationFrame(() => {
+            dialog.querySelector('wa-input[name="username"]')?.focus();
+        });
         return {
             result,
             close: () => settleOnce(null),

package/dist/shell.css

@@ -123,39 +123,13 @@ body {
 }
 
 /* Busy overlay */
-#shell-busy-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
 .shell-busy-content {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 2rem 1.5rem;
   text-align: center;
-  min-width: 200px;
-}
-
-.shell-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #e5e7eb;
-  border-top-color: #3b82f6;
-  border-radius: 50%;
-  animation: shell-spin 0.8s linear infinite;
-  margin: 0 auto 1rem;
-}
-
-@keyframes shell-spin {
-  to { transform: rotate(360deg); }
 }
 
 .shell-busy-message {
@@ -175,15 +149,11 @@ body {
 }
 
 .shell-toast {
-  padding: 1rem 1.5rem;
-  border-radius: 6px;
-  color: white;
-  font-size: 0.875rem;
+  max-width: 400px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   opacity: 0;
   transform: translateX(100%);
   transition: all 0.3s;
-  max-width: 400px;
 }
 
 .shell-toast-show {
@@ -191,109 +161,29 @@ body {
   transform: translateX(0);
 }
 
-.shell-toast-success {
-  background-color: #10b981;
-}
-
-.shell-toast-error {
-  background-color: #ef4444;
-}
-
-.shell-toast-warning {
-  background-color: #f59e0b;
-}
-
-.shell-toast-info {
-  background-color: #3b82f6;
-}
-
 /* Dialog */
-.shell-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10001;
-}
-
 .shell-dialog {
-  background: white;
-  border-radius: 8px;
-  padding: 1.5rem;
-  min-width: 400px;
-  max-width: 600px;
-  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
-}
-
-.shell-dialog-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1e293b;
-  margin-bottom: 1rem;
+  --width: 440px;
 }
 
 .shell-dialog-message {
   color: #64748b;
-  margin-bottom: 1.5rem;
   line-height: 1.5;
 }
 
-.shell-dialog-buttons {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}
-
-.shell-btn {
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.shell-btn-primary {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.shell-btn-primary:hover {
-  background-color: #2563eb;
-}
-
-.shell-btn-secondary {
-  background-color: #e5e7eb;
-  color: #1e293b;
-}
-
-.shell-btn-secondary:hover {
-  background-color: #d1d5db;
-}
-
-.shell-btn-default {
-  background-color: #f3f4f6;
-  color: #1e293b;
+/* Re-authentication prompt */
+.shell-auth-dialog {
+  --width: 400px;
 }
 
-.shell-btn-default:hover {
-  background-color: #e5e7eb;
+.shell-auth-message {
+  color: #64748b;
+  margin-bottom: 1rem;
+  line-height: 1.5;
 }
 
-/* Re-authentication prompt */
-.shell-dialog-error {
-  color: #dc2626;
-  background-color: #fef2f2;
-  border-radius: 6px;
-  padding: 0.5rem 0.75rem;
+.shell-auth-error {
   margin-bottom: 1rem;
-  font-size: 0.875rem;
 }
 
 .shell-auth-form {
@@ -301,16 +191,3 @@ body {
   flex-direction: column;
   gap: 0.75rem;
 }
-
-.shell-auth-form input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 0.875rem;
-}
-
-.shell-auth-form input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herdingbits/trailhead-webawesome",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Web Awesome web components adapter for Trailhead. Vanilla TypeScript, no React required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,11 +22,11 @@
   },
   "peerDependencies": {
     "@awesome.me/webawesome": "^3.6.0",
-    "@herdingbits/trailhead-core": "^0.2.0"
+    "@herdingbits/trailhead-core": "^0.3.0"
   },
   "devDependencies": {
     "@awesome.me/webawesome": "^3.10.0",
-    "@herdingbits/trailhead-types": "^0.2.0",
+    "@herdingbits/trailhead-types": "^0.3.0",
     "typescript": "^6.0.3"
   },
   "keywords": [