feat: custom item list in selector

src/components/ChoiceSelect/ChoiceSelect.css

@@ -1,65 +1,120 @@
+/* ChoiceSelect.css */
 .choice-select {
   position: relative;
   display: flex;
-  align-items: stretch;
+
+  color: var(--accent-brand);
 }
 
 .choice-select[data-disabled] {
   opacity: 0.5;
 }
 
-.choice-select__input {
+.choice-select__trigger {
   flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
 
-  height: var(--card-control-height);
-  padding: 0 var(--space-6) 0 var(--space-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0;
+  padding-inline: 5%;
 
   background: transparent;
-  color: var(--text-primary);
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-sm);
 
   font-family: var(--font-ui);
-  font-size: var(--font-sm);
+  font-size: 90%;
+  
+  color: inherit;
 
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  outline: none;
   cursor: pointer;
-
   transition: border-color var(--dur-base) var(--ease-standard);
 }
 
-.choice-select__input:focus {
+.choice-select__trigger:hover,
+.choice-select__trigger--open {
   border-color: var(--accent-brand);
 }
 
-.choice-select__input:disabled {
+.choice-select__trigger:disabled {
   cursor: not-allowed;
 }
 
+.choice-select__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .choice-select__chevron {
-  position: absolute;
-  top: 0;
-  right: 2%;
-  bottom: 0;
-
-  width: 4cqh;
-  padding-top: 3%;
-  padding-bottom: 3%;
-
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  pointer-events: none;
+  width: 4cqh;
+  aspect-ratio: 1;
+
   color: var(--accent-brand);
+  transition: transform var(--dur-base) var(--ease-standard);
+}
+
+.choice-select__trigger--open .choice-select__chevron {
+  transform: rotate(180deg);
 }
 
 .choice-select__chevron svg {
-  width: 75%;
+  width: 50%;
   height: auto;
   display: block;
 }
+
+.choice-select__option {
+  padding: 1%;
+  border-radius: var(--radius-sm);
+  font-size: 100%;
+  color: var(--text-primary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.choice-select__option--highlight {
+  background: var(--bg-raised);
+}
+
+.choice-select__option--selected {
+  color: var(--accent-brand);
+  font-weight: var(--font-weight-semibold);
+}
+
+.choice-select__listbox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 40;
+
+  top: calc(100% + var(--space-1));
+
+  margin: 0;
+  padding: var(--space-1);
+  list-style: none;
+
+  background: var(--bg-panel);
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.choice-select__listbox--up {
+  top: auto;
+  bottom: calc(100% + var(--space-1));
+}