js-kompo-utils 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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.textContent = '\u00D7';
+        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: 8px;
+    right: 8px;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.06);
+    color: #999;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
+    z-index: 1;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.12);
+        color: #333;
+    }
+}
+
 .tutorial-text {
     margin: 0;
     max-height: clamp(150px, 40vh, 300px);