@magic-spells/dropdown-select/dist/dropdown-select.css

Accessible custom dropdown web component.

:root {
  --select-dropdown-width: 300px;
  --select-options-max-height: 15rem;
  --select-caret-size: 0.25rem;
  --select-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  --select-font-size-base: 1rem;
  --select-line-height: 1.5;
  --select-color-text: #333;
  --select-color-background: #fff;
  --select-color-border: #ddd;
  --select-color-border-hover: #aaa;
  --select-color-border-dark: #666;
  --select-color-primary: #4299e1;
  --select-color-primary-rgb: 66, 153, 225;
  --select-color-hover: #f0f0f0;
  --select-color-focus: #e6f7ff;
  --select-color-selected: #e6f7ff;
  --select-spacing-xs: 0.25rem;
  --select-spacing-sm: 0.75rem;
  --select-spacing-md: 1rem;
  --select-border-radius: 0.25rem;
  --select-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --select-z-index-dropdown: 10;
  --select-transition-duration: 0.2s;
}

/* dropdown component styles */
dropdown-select {
  position: relative;
  width: var(--select-dropdown-width);
  margin-bottom: var(--select-spacing-md);
  display: block;
  font-family: var(--select-font-family);
  font-size: var(--select-font-size-base);
  line-height: var(--select-line-height);
  color: var(--select-color-text);
  box-sizing: border-box;
}

dropdown-select * {
  box-sizing: border-box;
}

/* hide dropdown when aria-hidden="true" */
dropdown-select[aria-hidden=true] dropdown-options {
  display: none;
}

/* trigger button styles */
dropdown-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--select-spacing-sm) var(--select-spacing-md);
  background-color: var(--select-color-background);
  border: 1px solid var(--select-color-border);
  border-radius: var(--select-border-radius);
  cursor: pointer;
  transition: border-color var(--select-transition-duration), box-shadow var(--select-transition-duration);
}
dropdown-select-trigger:hover {
  border-color: var(--select-color-border-hover);
}
dropdown-select-trigger:focus {
  outline: none;
  border-color: var(--select-color-primary);
  box-shadow: 0 0 0 3px rgba(var(--select-color-primary-rgb, 66, 153, 225), 0.25);
}

/* caret icon */
.dropdown-caret {
  border-style: solid;
  border-width: var(--select-caret-size) var(--select-caret-size) 0;
  border-color: var(--select-color-border-dark) transparent transparent;
  margin-left: var(--select-spacing-sm);
  transition: transform var(--select-transition-duration);
}

/* Flipped caret when expanded (default direction) */
dropdown-select:not([direction=up]) dropdown-select-trigger[aria-expanded=true] .dropdown-caret {
  transform: rotate(180deg);
}

/* Already flipped caret for upward dropdowns when closed */
dropdown-select[direction=up] .dropdown-caret {
  transform: rotate(180deg);
  border-width: 0 var(--select-caret-size) var(--select-caret-size);
  border-color: transparent transparent var(--select-color-border-dark);
}

/* Flip back to normal when expanded for upward dropdowns */
dropdown-select[direction=up] dropdown-select-trigger[aria-expanded=true] .dropdown-caret {
  transform: rotate(0);
}

/* options container */
dropdown-options {
  position: absolute;
  left: 0;
  width: 100%;
  max-height: var(--select-options-max-height);
  overflow-y: auto;
  background-color: var(--select-color-background);
  border: 1px solid var(--select-color-border);
  border-radius: var(--select-border-radius);
  box-shadow: var(--select-box-shadow);
  z-index: var(--select-z-index-dropdown);
}

/* Default direction (down) */
dropdown-select:not([direction=up]) dropdown-options {
  top: calc(100% + var(--select-spacing-xs));
}

/* Direction up */
dropdown-select[direction=up] dropdown-options {
  bottom: calc(100% + var(--select-spacing-xs));
}

/* Add some elevation for upward direction to create nice shadow */
dropdown-select[direction=up] dropdown-options {
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

/* styling for the list */
.dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* option items */
dropdown-option {
  padding: var(--select-spacing-sm) var(--select-spacing-md);
  cursor: pointer;
  transition: background-color var(--select-transition-duration);
  display: block;
}
dropdown-option:hover {
  background-color: var(--select-color-hover);
}
dropdown-option:focus {
  outline: none;
  background-color: var(--select-color-focus);
  box-shadow: inset 0 0 0 2px var(--select-color-primary);
}
dropdown-option[aria-selected=true] {
  background-color: var(--select-color-selected);
  font-weight: 500;
}

/* hidden input */
.dropdown-hidden-input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}