small changes, annotation

bin/demo.css

@@ -105,7 +105,7 @@ a:hover {
 }
 .xmpl > button,
 .xmpl > m-burger {
-	--mb-cross-timeout: 0s;
+	--mb-animate-timeout: 0s;
 
 	position: absolute;
 	top: 50%;
@@ -119,21 +119,21 @@ a:hover {
 	right: 0;
 }
 
-button.custom-button-1 {
+.xmpl .custom-button-1 {
 	padding: 5px 25px 5px 15px;
 	background-color: rgba( 255, 255, 255, 0.7 );
 	color: #3ea7e1;
 	border-radius: 30px;
 	white-space: nowrap;
 }
-button.custom-button-1 .mburger {
-	--mb-cross-timeout: 0s;
+.xmpl .custom-button-1 .mburger {
+	--mb-animate-timeout: 0s;
 	--mb-button-size: 40px;
 	--mb-bar-height: 3px;
 	--mb-bar-spacing: 6px;
 }
-button.custom-button-2 {
-	--mb-cross-timeout: 0s;
+.xmpl .custom-button-2 {
+	--mb-animate-timeout: 0s;
 	--mb-button-size: 80px;
 	--mb-bar-width: 0.5;
 	--mb-bar-height: 2px;

bin/mburger.js

@@ -1,5 +1,5 @@
 /*
- * mburger webcomponent CSS v1.3.0
+ * mburger webcomponent v1.3.1
  * mmenujs.com/mburger
  *
  * Copyright (c) Fred Heusschen
@@ -14,42 +14,54 @@ mBurger.innerHTML = `
 	<b></b>
 	<b></b>
 	<b></b>
-	<span><slot></slot></span>`;
+	<slot></slot>`;
 customElements.define('m-burger', class extends HTMLElement {
     constructor() {
         super();
-        var content = mBurger.content.cloneNode(true);
+        /** The menu node. */
+        this.menuNode = null;
+        /** API for the menu. */
+        this.menuApi = null;
         //	Attach shadow DOM
+        var content = mBurger.content.cloneNode(true);
         this.attachShadow({ mode: 'open' }).appendChild(content);
-        this.menu = null;
     }
     static get observedAttributes() {
         return ['menu'];
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name == 'menu') {
-            this.menu = newValue ? document.getElementById(newValue) : null;
-            if (this.menu) {
-                let API = this.menu['mmenu'];
-                if (API) {
-                    API.bind('open:after', () => {
-                        this.setAttribute('state', 'cross');
-                    });
-                    API.bind('close:after', () => {
-                        this.removeAttribute('state');
-                    });
-                }
+            //  Set the new menu node and API.
+            this.setMenu(newValue);
+            //  Change the hamburger state when opening and closing the menu.
+            if (this.menuApi) {
+                this.menuApi.bind('open:after', () => {
+                    this.setAttribute('state', 'cross');
+                });
+                this.menuApi.bind('close:after', () => {
+                    this.removeAttribute('state');
+                });
             }
         }
     }
     connectedCallback() {
+        //  Open the menu when clicking the hamburger.
         this.addEventListener('click', evnt => {
-            if (this.menu && this.menu.classList.contains('mm-menu')) {
-                let API = this.menu['mmenu'];
-                if (API && API.open) {
-                    API.open();
-                }
+            if (this.menuApi && this.menuApi.open) {
+                this.menuApi.open();
             }
         });
     }
+    /**
+     * Set the menu node and API.
+     * @param {string} id The ID-attribute for the menu node.
+     */
+    setMenu(id) {
+        this.menuNode = id ? document.getElementById(id) : null;
+        this.menuApi = null;
+        if (this.menuNode) {
+            this.menuApi =
+                this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
+        }
+    }
 });

composer.json

@@ -1,6 +1,6 @@
 {
 	"name"			: "mburger-css",
-	"version"		: "1.2.0",
+	"version"		: "1.3.1",
 	"authors"		: "Fred Heusschen <info@frebsite.nl>",
 	"license"		: "CC-BY-4.0",
 	"description"	: "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
@@ -13,4 +13,4 @@
 		"menu",
 		"navigation"
 	]
-}
+}