js-kompo-utils 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "main": "app.js",
   "scripts": {

package/tutorials/TutorialEngine.js

@@ -181,6 +181,10 @@ export class TutorialEngine {
     }
 
     _wireButtons() {
+        if (this.bubble.closeBtn) {
+            this.bubble.closeBtn.addEventListener('click', () => { this._close(); });
+        }
+
         if (this.bubble.actionBtn) {
             this.bubble.actionBtn.addEventListener('click', () => { this._advance(); });
         }

package/tutorials/modules/Bubble.js

@@ -29,6 +29,12 @@ export class Bubble {
         this.el.style.fontSize = config.bubbleFontSize;
         this.el.style.lineHeight = config.bubbleLineHeight;
 
+        this.closeBtn = document.createElement('button');
+        this.closeBtn.className = 'tutorial-close-btn';
+        this.closeBtn.setAttribute('aria-label', 'Close tutorial');
+        this.closeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/></svg>';
+        this.el.appendChild(this.closeBtn);
+
         this.arrowEl = document.createElement('div');
         this.arrowEl.className = 'tutorial-arrow';
         this.el.appendChild(this.arrowEl);
@@ -209,6 +215,7 @@ export class Bubble {
         this.actionBtn = null;
         this.backBtn = null;
         this.pauseBtn = null;
+        this.closeBtn = null;
     }
 
     // --- Private: mobile positioning (CSS flexbox, no @floating-ui) ---

package/tutorials/tutorial.scss

@@ -213,6 +213,32 @@
     }
 }
 
+// === Close button (top-right of bubble) ===
+.tutorial-close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 50%;
+    background: none;
+    color: #aaa;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s;
+    z-index: 2;
+    padding: 0;
+
+    &:hover {
+        color: #333;
+    }
+}
+
 .tutorial-text {
     margin: 0;
     max-height: clamp(150px, 40vh, 300px);