@llselect/core/dist/themes/bootstrap-5.css

Low-level select: a minimal, flexible, framework-agnostic replacement for the native HTML select element.

/* llselect - Bootstrap 5 theme. Uses BS5 CSS custom properties so it
   inherits the user's Bootstrap colors / border radius / etc. Falls back to
   sensible defaults if BS5 vars are not present. */

.llselect-root {
  position: relative;
  display: inline-block;
  min-width: 14rem;
  font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
  font-size: var(--bs-body-font-size, 1rem);
  color: var(--bs-body-color, #212529);
  line-height: var(--bs-body-line-height, 1.5);
}

/* --- trigger (matches .form-control look) --------------------- */

.llselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  background-color: var(--bs-body-bg, #fff);
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.llselect-trigger:hover {
  border-color: var(--bs-border-color, #dee2e6);
}

.llselect-trigger:focus,
.llselect-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 50%, transparent);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.llselect-trigger[data-state='open'] {
  border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 50%, transparent);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.llselect-trigger-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llselect-trigger[data-empty='true'] .llselect-trigger-content {
  color: var(--bs-secondary-color, #6c757d);
}

.llselect-trigger-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--bs-secondary-color, #6c757d);
  transition: transform 0.2s ease-in-out;
}

.llselect-trigger-arrow:empty { display: none; }

.llselect-trigger[data-state='open'] .llselect-trigger-arrow {
  transform: rotate(180deg);
}

/* --- popup (matches .dropdown-menu look) ---------------------- */

.llselect-popup {
  background-color: var(--bs-body-bg, #fff);
  border: var(--bs-border-width, 1px) solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow:
    0 0.5rem 1rem rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.15);
  color: var(--bs-body-color, #212529);
  z-index: 1000;
  padding: 0.5rem 0;
}

/* --- items (matches .dropdown-item look) ---------------------- */

.llselect-item {
  padding: 0.25rem 1rem;
  cursor: pointer;
  color: var(--bs-body-color, #212529);
  background-color: transparent;
}

.llselect-item:hover {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--bs-body-color, #212529);
}

.llselect-item-focused {
  background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent);
  color: var(--bs-body-color, #212529);
}

.llselect-item-focused:hover {
  background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 18%, transparent);
}

.llselect-item[aria-selected='true'] {
  font-weight: 600;
  color: var(--bs-primary, #0d6efd);
}

/* --- choose-all row (multi, opt-in) ----------------------------- */
/* The default row content is just the counting text (its numbers carry the
   tri-state); data-chosen-state is the hook if a theme wants to draw its own
   indicator, createChooseAllRowContentElFn the way to add a real one. The
   row also carries the plain item class, so hover / focused styling comes
   from there. Its divider is drawn by the block-edge rules under "dividers
   around the command rows": one line where the block above the items ends,
   none between the row and a command row that follows it. */

/* --- groups (Phase 10, matches .dropdown-header look) --------- */
/* Static label by default; rect-based scroll math (keyboard.ts) allows a
   theme to make it `position: sticky; top: 0`. */

.llselect-group-label {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.llselect-group[data-disabled='true'] .llselect-group-label {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- filter input (Phase 8) ------------------------------------ */

.llselect-filter-input {
  flex: none;
  margin: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  font: inherit;
  outline: none;
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
}

.llselect-filter-input:focus {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary, #0d6efd) 25%, transparent);
}

/* --- no-results message ----------------------------------------- */

.llselect-popup-list-no-results {
  padding: 0.25rem 1rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* --- dividers around the command rows --------------------------- */
/* The choose-all row and the action rows form one block above the items and
   one below; they carry .llselect-item too, so hover / focused / disabled
   styling comes from there. Exactly one line marks each block's edge with
   the items, drawn as the next element's border-top through sibling
   combinators (`:has` is above the browser floor). No line inside a block:
   choose-all followed by a command row reads as one group, like the header
   blocks of ng-select, Element Plus and Vuetify's select-all recipe. */

.llselect-choose-all-row + .llselect-item:not(.llselect-popup-list-action-row),
.llselect-choose-all-row + .llselect-group,
.llselect-popup-list-action-row + .llselect-item:not(.llselect-popup-list-action-row),
.llselect-popup-list-action-row + .llselect-group,
.llselect-item:not(.llselect-popup-list-action-row):not(.llselect-choose-all-row) + .llselect-popup-list-action-row,
.llselect-group + .llselect-popup-list-action-row {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- pinned command blocks --------------------------------------- */
/* popupListLeadingRowsPinned / popupListTrailingRowsPinned wrap a block in a
   presentational div that the library makes sticky. The theme gives it an
   opaque background (the items scroll under it) and the block's edge line,
   because the sibling rules above cannot see through the wrapper. The line
   is drawn only toward items: the library sets data-edge-to-items on every
   render, so two blocks that touch (nothing listed) draw no line at all. */

.llselect-popup-list-pinned-leading-rows,
.llselect-popup-list-pinned-trailing-rows {
  background: var(--bs-body-bg, #fff);
  z-index: 1;
}
.llselect-popup-list-pinned-leading-rows[data-edge-to-items='true'] {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.llselect-popup-list-pinned-trailing-rows[data-edge-to-items='true'] {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- popup header / footer slots -------------------------------- */
/* Pinned above / below the list, outside the scroll area. The elements exist
   only when their content settings return an element; the divider matches
   the choose-all row. */

.llselect-popup-header {
  padding: 0.25rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.llselect-popup-footer {
  padding: 0.25rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- disabled (Phase 9) ---------------------------------------- */
/* aria-disabled + data-disabled, never native `disabled`. Keep pointer
   events alive (no `pointer-events: none`) so hover/focus tooltips work. */

.llselect-trigger[data-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Embedded buttons are inert while the control is disabled: show not-allowed,
   not the pointer cursor their own rule sets. */
.llselect-trigger[data-disabled='true'] .llselect-tag-remove-button,
.llselect-trigger[data-disabled='true'] .llselect-trigger-clear-button {
  cursor: not-allowed;
}

.llselect-item-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.llselect-item-disabled:hover {
  background: none;
}

/* --- tags (triggerDisplay: 'tags', chip look) ---------------- */
/* :has lets the trigger content wrap for chips (nowrap+ellipsis otherwise). */

.llselect-trigger-content:has(.llselect-tags) {
  white-space: normal;
  overflow: visible;
}

.llselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.llselect-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  /* Logical: mirrors under dir="rtl" (text side start, x-button side end). */
  padding-block: 0.1rem;
  padding-inline: 0.5rem 0.2rem;
  background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent);
  color: var(--bs-primary, #0d6efd);
  border-radius: var(--bs-border-radius-sm, 0.25rem);
  font-size: 0.85rem;
  line-height: 1.5;
}

.llselect-tag-remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  padding: 0;
  border: none;
  border-radius: 0.2rem;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.llselect-tag-remove-button:empty::before { content: '\00d7'; font-size: 1.15em; }

.llselect-tag-remove-button:hover { opacity: 1; }

/* A disabled item's chip: greyed, its x inert (the JS click guard is the real block). */
.llselect-tag-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.llselect-tag-disabled .llselect-tag-remove-button {
  cursor: not-allowed;
}

/* --- clear button (clearable) -------------------------------- */
/* :empty::before draws the x only when createTriggerClearButtonContentElFn gave no icon. */

.llselect-trigger-clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  border: none;
  border-radius: 0.2rem;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.llselect-trigger-clear-button:empty::before { content: '\00d7'; font-size: 1.2em; }

.llselect-trigger-clear-button:hover {
  color: var(--bs-body-color, #212529);
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.llselect-trigger[data-empty='true'] .llselect-trigger-clear-button { display: none; }