Various fixes for ui3 menu

Author: Templarian

src/pg/inputSelect/README.md

@@ -4,7 +4,7 @@ The `pg-input-select` component creates an select drop down.
 
 ```typescript
 import '@pictogrammers/components/pgInputSelect';
-import { PgInputSelect } '@mdi/components/pgInputSelect';
+import { PgInputSelect } '@pictogrammers/components/pgInputSelect';
 ```
 
 ```html

src/pg/inputUserSelect/README.md

@@ -4,7 +4,7 @@ The `pg-input-user-select` component creates an select drop down.
 
 ```typescript
 import '@pictogrammers/components/pgInputUserSelect';
-import { PgInputUserSelect } '@mdi/components/pgInputUserSelect';
+import { PgInputUserSelect } '@pictogrammers/components/pgInputUserSelect';
 ```
 
 ```html

src/pg/menuItem/menuItem.css

@@ -9,7 +9,7 @@
   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 0.25rem 1.5rem);
+  padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 1.5rem);
   border-color: transparent;
   border-width: 0;
   border-style: solid;
@@ -46,7 +46,7 @@
 }
 
 [part=label].checked:disabled::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='rgb(69, 60, 79, 0.5)' /></svg>"));
+  content: var(--pg-menu-item-disabled-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='rgb(69, 60, 79, 0.5)' /></svg>"));
 }
 
 [part=label]:focus {
@@ -63,4 +63,8 @@
   left: -1px;
   border-radius: 0.25rem;
   box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
+}
+
+[part=label]:focus:not(:hover)::after {
+  background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
 }

src/theme-ui3.css

@@ -15,6 +15,7 @@
   --pg-button-hover-color: #FFFFFF;
   --pg-button-hover-color: #FFFFFF;
   /* Menu */
+  --pg-menu-background-color: #1E1E1E;
   --pg-menu-padding: 0.25rem;
   --pg-menu-border-width: 0;
   --pg-menu-border-color: transparent;
@@ -24,6 +25,7 @@
   --pg-menu-item-selected-background: #248BE5;
   --pg-menu-item-disabled-color: #BBBBBB;
   --pg-menu-item-check: 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>");
-  --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.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>");
+  --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.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>");
+  --pg-menu-item-disabled-check: 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>");
   --pg-menu-item-active-background: #2B9CFF;
 }