feedbackkit-web 1.0.49 → 1.0.51

package/dist/feedbackkit.js

@@ -1364,6 +1364,39 @@ button:disabled { cursor: not-allowed; opacity: 0.45; }
 .fk-trigger[data-compact="true"] { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 24px; }
 .fk-trigger[data-compact="true"] .fk-trigger-label { display: none; }
 .fk-trigger[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
+.fk-trigger-hint {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  background: rgba(17, 17, 20, 0.92);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  letter-spacing: 0.02em;
+}
+.fk-trigger-hint::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(17, 17, 20, 0.92);
+}
+.fk-trigger:hover .fk-trigger-hint,
+.fk-trigger:focus-visible .fk-trigger-hint {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
 
 /* ---------- overlay ---------- */
 .fk-overlay {
@@ -1677,7 +1710,7 @@ class Widget {
     button2.title = `${label} (${shortcutLabel})`;
     button2.setAttribute("aria-label", `${label} (${shortcutLabel})`);
     button2.setAttribute("aria-keyshortcuts", isMac ? "Meta+Shift+F" : "Control+Shift+F");
-    button2.innerHTML = `${icons.feedback}<span class="fk-trigger-label"></span>`;
+    button2.innerHTML = `${icons.feedback}<span class="fk-trigger-label"></span><span class="fk-trigger-hint" aria-hidden="true">${shortcutLabel}</span>`;
     button2.querySelector(".fk-trigger-label").textContent = label;
     button2.addEventListener("click", onClick);
     shadow.append(button2);
@@ -1994,7 +2027,7 @@ class Dialog {
     const summary = el("span", "fk-options-summary");
     const renderSummary = () => {
       const parts = [];
-      if (!this.includeScreenshot) parts.push("No screenshot");
+      if (!this.shot) parts.push("No screenshot");
       if (this.notifyReporter) parts.push("Notify me");
       summary.textContent = parts.join(" · ");
     };
@@ -2018,16 +2051,6 @@ class Dialog {
       menu.append(item("Attach file…", () => fileInput.click()));
       if (window.matchMedia?.("(pointer: coarse)").matches) menu.append(item("Take photo", () => cameraInput.click()));
       menu.append(el("hr", "fk-menu-sep"));
-      if (this.shot) {
-        menu.append(
-          item("Include screenshot", () => {
-            this.includeScreenshot = !this.includeScreenshot;
-            this.stage.dataset.screenshot = this.includeScreenshot ? "on" : "off";
-            renderSummary();
-            this.refreshState();
-          }, this.includeScreenshot)
-        );
-      }
       menu.append(
         item("Notify me when it's fixed", () => {
           this.notifyReporter = !this.notifyReporter;
@@ -2078,7 +2101,17 @@ class Dialog {
     this.sendButton.title = "Send (⌘/Ctrl + Enter)";
     this.sendButton.addEventListener("click", () => void this.send());
     actions.append(cancel, this.sendButton);
-    composer.append(header, textGroup, productsGroup, optionsRow);
+    composer.append(header, textGroup, productsGroup);
+    if (this.shot) {
+      composer.append(
+        switchControl("Include screenshot", this.includeScreenshot, (on) => {
+          this.includeScreenshot = on;
+          this.stage.dataset.screenshot = on ? "on" : "off";
+          this.refreshState();
+        })
+      );
+    }
+    composer.append(optionsRow);
     if (meta) composer.append(meta);
     composer.append(el("div", "fk-spacer"), this.errorBox, actions);
     this.refreshState();