js-kompo-utils 1.0.9 → 1.0.10

package/package.json

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

package/tutorials/modules/Bubble.js

@@ -32,7 +32,7 @@ export class Bubble {
         this.closeBtn = document.createElement('button');
         this.closeBtn.className = 'tutorial-close-btn';
         this.closeBtn.setAttribute('aria-label', 'Close tutorial');
-        this.closeBtn.textContent = '\u00D7';
+        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');

package/tutorials/tutorial.scss

@@ -216,25 +216,25 @@
 // === Close button (top-right of bubble) ===
 .tutorial-close-btn {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 28px;
-    height: 28px;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
     border: none;
     border-radius: 50%;
-    background: rgba(0, 0, 0, 0.06);
-    color: #999;
-    font-size: 18px;
+    background: none;
+    color: #aaa;
+    font-size: 20px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s, color 0.15s;
-    z-index: 1;
+    transition: color 0.15s;
+    z-index: 2;
+    padding: 0;
 
     &:hover {
-        background: rgba(0, 0, 0, 0.12);
         color: #333;
     }
 }