@llselect/core/dist/themes/tailwind.css

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

/* llselect - Tailwind CSS theme. Uses Tailwind v4 CSS custom properties
   (`--color-*`) so users on v4 get their actual palette; falls back to the
   default Tailwind values so this file works standalone on v3 or with no
   Tailwind installed at all. */

.llselect-root {
  position: relative;
  display: inline-block;
  min-width: 14rem;
  font-family:
    var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 0.875rem;            /* text-sm */
  color: var(--color-slate-900, #0f172a);
  line-height: 1.25rem;
}

/* --- trigger -------------------------------------------------- */

.llselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;        /* py-2 px-3 */
  border: 1px solid var(--color-slate-300, #cbd5e1);
  border-radius: 0.375rem;        /* rounded-md */
  background-color: var(--color-white, #fff);
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 150ms,
    box-shadow 150ms;
}

.llselect-trigger:hover {
  border-color: var(--color-slate-400, #94a3b8);
}

.llselect-trigger:focus,
.llselect-trigger:focus-visible,
.llselect-trigger[data-state='open'] {
  outline: 0;
  border-color: var(--color-blue-500, #3b82f6);
  /* ring-2 ring-blue-500/30 -- Tailwind's focus-ring style */
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-blue-500, #3b82f6) 30%, transparent);
}

.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(--color-slate-400, #94a3b8);
}

.llselect-trigger-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-slate-500, #64748b);
  transition: transform 150ms;
}

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

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

/* --- popup ---------------------------------------------------- */

.llselect-popup {
  background-color: var(--color-white, #fff);
  border: 1px solid var(--color-slate-200, #e2e8f0);
  border-radius: 0.5rem;          /* rounded-lg */
  /* shadow-lg */
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  color: var(--color-slate-900, #0f172a);
  z-index: 1000;
  padding: 0.25rem 0;             /* py-1 */
}

/* --- items ---------------------------------------------------- */

.llselect-item {
  padding: 0.375rem 0.75rem;      /* py-1.5 px-3 */
  cursor: pointer;
  color: var(--color-slate-700, #334155);
  background-color: transparent;
  transition: background-color 100ms;
}

.llselect-item:hover {
  background-color: var(--color-slate-100, #f1f5f9);
  color: var(--color-slate-900, #0f172a);
}

.llselect-item-focused {
  background-color: var(--color-blue-50, #eff6ff);
  color: var(--color-blue-700, #1d4ed8);
}

.llselect-item-focused:hover {
  background-color: var(--color-blue-100, #dbeafe);
  color: var(--color-blue-700, #1d4ed8);
}

.llselect-item[aria-selected='true'] {
  font-weight: 600;
  color: var(--color-blue-600, #2563eb);
}

/* --- 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) ---------------------------------------- */
/* Static label by default; rect-based scroll math (keyboard.ts) is
   offsetParent-independent, so a theme MAY make this `position: sticky; top:0`. */

.llselect-group-label {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;             /* text-xs */
  font-weight: 600;
  color: var(--color-slate-500, #64748b);
  background-color: var(--color-slate-50, #f8fafc);
}

.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(--color-slate-300, #cbd5e1);
  border-radius: 0.375rem;
  font: inherit;
  outline: none;
  background-color: var(--color-white, #fff);
  color: var(--color-slate-900, #0f172a);
}

.llselect-filter-input:focus {
  border-color: var(--color-blue-500, #3b82f6);
  box-shadow: 0 0 0 3px var(--color-blue-100, #dbeafe);
}

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

.llselect-popup-list-no-results {
  padding: 0.375rem 0.75rem;
  color: var(--color-slate-400, #94a3b8);
}

/* --- 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(--color-white, #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.375rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.llselect-popup-footer {
  padding: 0.375rem 0.75rem;
  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') ---------------------------- */
/* :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.05rem;
  padding-inline: 0.5rem 0.15rem;
  background-color: var(--color-blue-50, #eff6ff);
  color: var(--color-blue-700, #1d4ed8);
  border-radius: 0.25rem;
  font-size: 0.8rem;
  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: var(--color-blue-400, #60a5fa);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

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

.llselect-tag-remove-button:hover {
  background-color: var(--color-blue-100, #dbeafe);
  color: var(--color-blue-700, #1d4ed8);
}

/* 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(--color-slate-400, #94a3b8);
  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(--color-slate-600, #475569);
  background-color: var(--color-slate-100, #f1f5f9);
}

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