More fixes

Author: Templarian

package-lock.json

@@ -25,9 +25,9 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.58",
+    "@pictogrammers/element": "0.0.59",
     "@pictogrammers/element-jest": "^0.1.8",
-    "@pictogrammers/element-webpack": "^0.1.48",
+    "@pictogrammers/element-webpack": "^0.1.49",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",

package.json

@@ -41,7 +41,7 @@
   right: -1px;
   bottom: -1px;
   left: -1px;
-  border-radius: 0.25rem;
+  border-radius: var(--pg-button-border-radius, 0.25rem);
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 [part="button"]:focus::before {
@@ -52,7 +52,7 @@
   right: -1px;
   bottom: -1px;
   left: -1px;
-  border-radius: 0.25rem;
+  border-radius: var(--pg-button-border-radius, 0.25rem);
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 

src/pg/button/button.css

@@ -14,8 +14,7 @@ export default class XPgMenuBasic extends HTMLElement {
   connectedCallback() {
     this.$menu.items = [{
       label: 'Item 1',
-      value: 'item1',
-      checked: true
+      value: 'item1'
     },
     {
       label: 'Item 2',

src/pg/menu/__examples__/basic/basic.ts

@@ -17,19 +17,26 @@ export default class PgMenu extends HTMLElement {
 
   @Part() $items: HTMLDivElement;
 
+  previousIndex = -1;
+
   connectedCallback() {
     forEach({
       container: this.$items,
       items: this.items,
       type: (item) => {
         return item.type ?? PgMenuItem;
       },
-      create: ($item, item) => {
+      create: ($item: any, item) => {
         $item.addEventListener('select', (e: any) => {
           const { index } = e.detail;
           this.dispatchEvent(new CustomEvent('select', {
             detail: { index, item }
           }));
+          if (this.previousIndex !== -1) {
+            this.items[this.previousIndex].checked = false;
+          }
+          $item.checked = true;
+          this.previousIndex = index;
         });
         $item.addEventListener('up', (e: any) => {
           const { index } = e.detail;
@@ -49,6 +56,9 @@ export default class PgMenu extends HTMLElement {
             this.focus(index + 1);
           }
         });
+        if (item.checked) {
+          this.previousIndex = $item.index;
+        }
       }
     });
   }

src/pg/menu/menu.ts

@@ -20,6 +20,7 @@
   color: var(--pg-menu-item-color, #453C4F);
 }
 
+[part=label]:not(:disabled):active,
 [part=label]:not(:disabled):hover {
   background: var(--pg-menu-item-selected-background, #453C4F);
   color: #FFFFFF;
@@ -41,6 +42,7 @@
   height: 1.5rem;
 }
 
+[part=label].checked:active::before,
 [part=label].checked:hover::before {
   content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='white' /></svg>"));
 }