@dile/ui 2.11.1 → 2.12.1

package/components/hamburger/src/DileHamburger.js

@@ -28,7 +28,7 @@ export class DileHamburger extends LitElement {
         margin: 0;
         overflow: visible;
         position: relative;
-        top: var(--dile-hamburguer-position-top, -1px);
+        top: var(--dile-hamburguer-position-top, 0);
       }
       .hamburger:hover {
         opacity: 0.7;
@@ -52,6 +52,8 @@ export class DileHamburger extends LitElement {
       .hamburger-inner {
         display: block;
         top: 50%;
+        left: 0;
+        transform: translateY(-50%);
         margin-top: 0px;
       }
       .hamburger-inner,
@@ -94,7 +96,7 @@ export class DileHamburger extends LitElement {
       }
 
       .hamburger--squeeze.is-active .hamburger-inner {
-        transform: rotate(45deg);
+        transform: translateY(-50%) rotate(45deg);
         transition-delay: 0.12s;
         transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       }
@@ -110,8 +112,18 @@ export class DileHamburger extends LitElement {
           transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
       }
 
-      button:focus {
-        outline: none;
+      .hamburger:focus {
+        background-color: transparent;
+      }
+      .hamburger:focus-visible {
+        outline: 2px solid var(--dile-hamburger-focus-outline, var(--dile-primary-dark-color, #0a66ff));
+        outline-offset: 3px;
+        background-color: transparent;
+      }
+      .hamburger:focus-visible .hamburger-inner,
+      .hamburger:focus-visible .hamburger-inner::before,
+      .hamburger:focus-visible .hamburger-inner::after {
+        background-color: var(--dile-hamburger-focus-color, var(--dile-primary-dark-color, #0a66ff));
       }
     `;
   }

package/mixins/close-document-click/src/DileCloseDocumentClick.js

@@ -12,18 +12,28 @@
 export const DileCloseDocumentClick = (SuperClass) =>
   class extends SuperClass {
 
+    static closeDocumentHandler = null;
+
     constructor() {
       super()
       if(!DileCloseDocumentClick.elements) {
         DileCloseDocumentClick.elements = [];
       }
-      this.closeDocumentHandler = this.closeAll.bind(this);
     }
 
     connectedCallback() {
       super.connectedCallback();
-      if (!DileCloseDocumentClick.elements.length) {
-        document.addEventListener("click", this.closeDocumentHandler);
+      if (!DileCloseDocumentClick.elements?.length) {
+        if (!DileCloseDocumentClick.closeDocumentHandler) {
+          DileCloseDocumentClick.closeDocumentHandler = () => {
+            if(DileCloseDocumentClick.elements) {
+              for (let ele of DileCloseDocumentClick.elements) {
+                ele.close();
+              }
+            }
+          };
+        }
+        document.addEventListener("click", DileCloseDocumentClick.closeDocumentHandler);
       }
       DileCloseDocumentClick.elements.push(this);
     }
@@ -34,8 +44,7 @@ export const DileCloseDocumentClick = (SuperClass) =>
         (item) => item != this
       );
       if (DileCloseDocumentClick.elements.length == 0) {
-        DileCloseDocumentClick.elements = null;
-        document.removeEventListener("click", this.closeDocumentHandler);
+        document.removeEventListener("click", DileCloseDocumentClick.closeDocumentHandler);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.11.1",
+  "version": "2.12.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "969c46331ec091df8745371ca5caec5dfabf2154"
+  "gitHead": "2ee025d271d519659ca39ccc38fc1d5445f7881d"
 }