Keyboard support and more

DynamicSelect.css

@@ -1,3 +1,16 @@
+dynamic-select selection, dynamic-select selected, dynamic-select dropdown, dynamic-select item {
+  all: unset;
+  display: block;
+}
+
+dynamic-select[disabled],
+.dynamic-select .dynamic-select-options .dynamic-select-option[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: transparent;
+  pointer-events: none;
+}
+
 .dynamic-select {
   display: flex;
   box-sizing: border-box;
@@ -6,12 +19,14 @@
   width: 100%;
   user-select: none;
 }
+
 .dynamic-select .dynamic-select-header {
   border: 1px solid #dee2e6;
   padding: 7px 30px 7px 12px;
 }
+
 .dynamic-select .dynamic-select-header::after {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   top: 50%;
@@ -21,18 +36,27 @@
   height: 12px;
   width: 12px;
 }
+
 .dynamic-select .dynamic-select-header.dynamic-select-header-active {
   border-color: #c1c9d0;
 }
+
 .dynamic-select .dynamic-select-header.dynamic-select-header-active::after {
   transform: translateY(-50%) rotate(180deg);
 }
+
 .dynamic-select .dynamic-select-header.dynamic-select-header-active + .dynamic-select-options {
   display: flex;
 }
+
+.dynamic-select .dynamic-select-header.dynamic-select-header-active + .dynamic-select-options.grid {
+  display: grid;
+}
+
 .dynamic-select .dynamic-select-header .dynamic-select-header-placeholder {
   color: #65727e;
 }
+
 .dynamic-select .dynamic-select-options {
   display: none;
   box-sizing: border-box;
@@ -51,24 +75,31 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .dynamic-select .dynamic-select-options::-webkit-scrollbar {
   width: 5px;
 }
+
 .dynamic-select .dynamic-select-options::-webkit-scrollbar-track {
   background: #f0f1f3;
 }
+
 .dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb {
   background: #cdcfd1;
 }
+
 .dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb:hover {
   background: #b2b6b9;
 }
+
 .dynamic-select .dynamic-select-options .dynamic-select-option {
   padding: 7px 12px;
 }
-.dynamic-select .dynamic-select-options .dynamic-select-option:hover, .dynamic-select .dynamic-select-options .dynamic-select-option:active {
+
+.dynamic-select .dynamic-select-options .dynamic-select-option:hover, .dynamic-select .dynamic-select-options .dynamic-select-option:active, .dynamic-select .dynamic-select-options .dynamic-select-option.focus {
   background-color: #f3f4f7;
 }
+
 .dynamic-select .dynamic-select-header, .dynamic-select .dynamic-select-option {
   display: flex;
   box-sizing: border-box;
@@ -82,26 +113,36 @@
   font-size: 16px;
   color: #212529;
 }
+
+.dynamic-select .dynamic-select-header.grid, .dynamic-select .dynamic-select-option.grid {
+  display: grid;
+}
+
 .dynamic-select .dynamic-select-header img, .dynamic-select .dynamic-select-option img {
   object-fit: contain;
   max-height: 100%;
   max-width: 100%;
 }
+
 .dynamic-select .dynamic-select-header img.dynamic-size, .dynamic-select .dynamic-select-option img.dynamic-size {
   object-fit: fill;
   max-height: none;
   max-width: none;
 }
+
 .dynamic-select .dynamic-select-header img, .dynamic-select .dynamic-select-header svg, .dynamic-select .dynamic-select-header i, .dynamic-select .dynamic-select-header span, .dynamic-select .dynamic-select-option img, .dynamic-select .dynamic-select-option svg, .dynamic-select .dynamic-select-option i, .dynamic-select .dynamic-select-option span {
   box-sizing: border-box;
   margin-right: 10px;
 }
+
 .dynamic-select .dynamic-select-header.dynamic-select-no-text, .dynamic-select .dynamic-select-option.dynamic-select-no-text {
   justify-content: center;
 }
+
 .dynamic-select .dynamic-select-header.dynamic-select-no-text img, .dynamic-select .dynamic-select-header.dynamic-select-no-text svg, .dynamic-select .dynamic-select-header.dynamic-select-no-text i, .dynamic-select .dynamic-select-header.dynamic-select-no-text span, .dynamic-select .dynamic-select-option.dynamic-select-no-text img, .dynamic-select .dynamic-select-option.dynamic-select-no-text svg, .dynamic-select .dynamic-select-option.dynamic-select-no-text i, .dynamic-select .dynamic-select-option.dynamic-select-no-text span {
   margin-right: 0;
 }
+
 .dynamic-select .dynamic-select-header .dynamic-select-option-text, .dynamic-select .dynamic-select-option .dynamic-select-option-text {
   box-sizing: border-box;
   flex: 1;
@@ -110,4 +151,4 @@
   white-space: nowrap;
   color: inherit;
   font-size: inherit;
-}
+}