Bug fixes needs a lot of rework.

Author: Templarian

src/pg/button/button.css

@@ -10,7 +10,7 @@
   font-size: var(--pg-button-font-size, 1rem);
   line-height: var(--pg-button-line-height, 1.5rem);
   border: 1px solid var(--pg-button-border-color, #453C4F);
-  background-color: var(--pg-button-background-color, #fff);
+  background-color: var(--pg-button-background-color, #FFFFFF);
   color: var(--pg-button-color, #453C4F);
   padding: var(--pg-button-padding, 0.25rem 0.5rem);
   border-radius: 0.25rem;
@@ -21,8 +21,8 @@
 [part="button"]:hover {
   border: 1px solid var(--pg-button-hover-border-color, #453C4F);
   background-color: var(--pg-button-hover-background-color, #453C4F);
-  color: var(--pg-button-hover-color, #fff);
-  --pg-icon-color: var(--pg-button-hover-color, #fff);
+  color: var(--pg-button-hover-color, #FFFFFF);
+  --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);
 }
 
 [part="button"]:active {

src/pg/inputSelect/__examples__/basic/basic.ts

@@ -19,6 +19,7 @@ export default class XPgInputSelectBasic extends HTMLElement {
       { label: 'Option 3', value: 'option3' },
       { label: 'Option 4', value: 'option4' }
     );
+    this.$input.default = { label: 'None', value: '', disabled: true };
     //this.$input.value = this.$input.options[1].value;
     this.$input.addEventListener('change', this.#handleChange.bind(this));
   }

src/pg/inputSelect/inputSelect.css

@@ -4,6 +4,7 @@
 
 [part=button] {
   font-family: var(--pg-font-family);
+  background: var(--pg-input-select-background, #FFFFFF);
   text-align: left;
   display: grid;
   grid-template-rows: auto;

src/pg/inputSelect/inputSelect.ts

@@ -18,6 +18,7 @@ export default class PgInputSelect extends HTMLElement {
   @Prop() options: InputSelectItem[] = [];
   @Prop() value: string = '';
   @Prop() name: string = '';
+  @Prop() default: any = null;
 
   @Part() $button: HTMLButtonElement;
   @Part() $label: HTMLSpanElement;
@@ -27,8 +28,12 @@ export default class PgInputSelect extends HTMLElement {
   }
 
   render(changes) {
-    if (changes.value) {
-      this.$label.textContent = this.value ? this.value : '\u00A0';
+    if (changes.value || changes.default) {
+      this.$label.textContent = this.value
+        ? this.value
+        : this.default
+          ? this.default.label
+          : '\u00A0'; // nbsp
     }
   }
 
@@ -38,6 +43,7 @@ export default class PgInputSelect extends HTMLElement {
     this.#menuOpen = true;
     const result = await PgOverlayMenu.open({
       source: this.$button,
+      default: this.default,
       value: this.options.find(x => x.value === this.value) ?? null,
       items: this.options
     });

src/pg/menu/menu.ts

@@ -36,6 +36,9 @@ export default class PgMenu extends HTMLElement {
   }
 
   focus(index) {
+    if (index === -1) {
+      index = this.items[0].disabled ? 1 : 0;
+    }
     const item = this.$items.children[index] as HTMLElement;
     item?.focus();
   }

src/pg/menuItem/__examples__/basic/basic.ts

@@ -1,4 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
+import PgMenuItem from '../../menuItem';
 
 import template from './basic.html';
 
@@ -7,5 +8,5 @@ import template from './basic.html';
   template
 })
 export default class XPgMenuItemBasic extends HTMLElement {
-
+  @Part() $item: PgMenuItem;
 }

src/pg/menuItem/menuItem.css

@@ -3,10 +3,12 @@
 }
 
 [part=label] {
+  display: flex;
+  align-items: center;
   font-family: var(--pg-font-family);
   text-align: var(--pg-menu-item-text-align, left);
   background: var(--pg-menu-item-background, transparent);
-  padding: var(--pg-menu-padding, 0.25rem 0.5rem);
+  padding: var(--pg-menu-padding, 0.25rem 0.5rem 0.25rem 1.5rem);
   border-color: transparent;
   border-width: 0;
   border-style: solid;
@@ -17,11 +19,28 @@
   color: var(--pg-menu-item-color, #FFFFFF);
 }
 
-[part=label]:hover {
+[part=label]:not(:disabled):hover
+/*[part=label]:not(:disabled):focus*/ {
   background: #248BE5;
   color: #FFFFFF;
 }
 
-[part=label]:active {
+[part=label]:not(:disabled):active {
   background: #2B9CFF;
+}
+
+[part=label]:disabled {
+  color: #BBBBBB;
+}
+
+[part=label].checked::before {
+  position: absolute;
+  translate: -1.5rem 0;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.4999,10.2501L 10.5,17.25L 6.49999,13.25L 7.9142,11.8358L 10.5,14.4216L 16.0857,8.83584L 17.4999,10.2501 Z' fill='white' /></svg>");
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+[part=label].checked:disabled::before {
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.4999,10.2501L 10.5,17.25L 6.49999,13.25L 7.9142,11.8358L 10.5,14.4216L 16.0857,8.83584L 17.4999,10.2501 Z' fill='rgb(187, 187, 187)' /></svg>");
 }

src/pg/menuItem/menuItem.ts

@@ -13,13 +13,21 @@ const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
 export default class PgMenuItem extends HTMLElement {
   @Prop() index: number;
   @Prop() label: string = '';
+  @Prop() checked: boolean = false;
+  @Prop() disabled: boolean = false;
 
-  @Part() $label: HTMLDivElement;
+  @Part() $label: HTMLButtonElement;
 
   render(changes) {
     if (changes.label) {
       this.$label.textContent = this.label;
     }
+    if (changes.disabled) {
+      this.$label.disabled = this.disabled;
+    }
+    if (changes.checked) {
+      this.$label.classList.toggle('checked', this.checked);
+    }
   }
 
   connectedCallback() {

src/pg/overlayMenu/overlayMenu.ts

@@ -15,11 +15,16 @@ export default class PgOverlayMenu extends PgOverlay {
   @Part() $menu: PgMenu;
 
   @Prop() source: HTMLElement | null = null;
+  @Prop() default: any = null;
   @Prop() items: any[] = [];
   @Prop() value: any = null;
 
   render(changes) {
     if (changes.items) {
+      if (this.value !== null) {
+        this.items.forEach(item => item.checked = false);
+        this.items.find(item => item.value === this.value.value).checked = true;
+      }
       this.$menu.items = this.items;
     }
   }
@@ -53,6 +58,12 @@ export default class PgOverlayMenu extends PgOverlay {
         y += (rect.height - height) / 2;
       }
     } else if (this.items.length > 0) {
+      // insert default if defined
+      if (this.default) {
+        this.default.checked = true;
+        this.$menu.items.unshift(this.default);
+      }
+      // focus first item
       const height = this.$menu.getItemHeight(0);
       y -= this.$menu.getItemOffset(0, 0);
       if (rect?.height !== height && rect?.height) {