/* Styled dropdown that replaces a native stays in the DOM as the source of truth - the enhancement only hides it. Anything reading .value / setting .disabled keeps working, and the form still submits normally. Not display:none: a hidden-but-focusable element keeps validation messages anchorable. */ .dd-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- trigger ------------------------------------------------------------- */ .dd-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-width: 11rem; padding: 0.375rem 0.625rem; border: 1px solid #cbd5e1; /* slate-300 */ border-radius: 0.375rem; background-color: #ffffff; color: #334155; /* slate-700 */ font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-align: left; cursor: pointer; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: background-color 120ms, border-color 120ms, color 120ms; } .dd-button:hover:not(:disabled) { background-color: #f1f5f9; /* slate-100 */ color: #0f172a; /* slate-900 */ } .dd-button:focus-visible { outline: none; border-color: #0ea5e9; /* sky-500 */ box-shadow: 0 0 0 3px rgb(14 165 233 / 0.25); } .dd-button:disabled { cursor: not-allowed; opacity: 0.5; } .dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-chevron { flex: none; width: 1rem; height: 1rem; color: #94a3b8; /* slate-400 */ transition: transform 150ms ease; } .dd[data-open="true"] .dd-chevron { transform: rotate(180deg); } /* ---- panel --------------------------------------------------------------- */ .dd-panel { position: absolute; z-index: 50; top: calc(100% + 0.25rem); left: 0; min-width: 100%; max-height: 16rem; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none; border: 1px solid #e2e8f0; /* slate-200 */ border-radius: 0.5rem; background-color: #ffffff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Animated in from 2px up. transform+opacity only, so it never triggers layout while the list is appearing. */ transform-origin: top; animation: dd-in 120ms ease-out; } @keyframes dd-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } /* Respect a reduced-motion preference: the chevron and panel still change state, they just stop animating. */ @media (prefers-reduced-motion: reduce) { .dd-panel { animation: none; } .dd-chevron { transition: none; } } .dd-option { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.25rem; color: #334155; /* slate-700 */ font-size: 0.875rem; line-height: 1.25rem; cursor: pointer; user-select: none; } /* One highlight for both pointer and keyboard. data-active is moved by the keyboard handler, so arrowing and hovering cannot end up highlighting two different rows at once. */ .dd-option[data-active="true"] { background-color: #f1f5f9; /* slate-100 */ color: #0f172a; } .dd-option[aria-selected="true"] { color: #0369a1; /* sky-700 */ font-weight: 600; } .dd-option[aria-selected="true"][data-active="true"] { background-color: #f0f9ff; /* sky-50 */ } .dd-check { flex: none; width: 1rem; height: 1rem; opacity: 0; color: #0ea5e9; /* sky-500 */ } .dd-option[aria-selected="true"] .dd-check { opacity: 1; } /* ---- dark ---------------------------------------------------------------- */ .dark .dd-button { border-color: rgb(51 65 85 / 0.8); /* slate-700/80 */ background-color: rgb(15 23 42 / 0.6); color: #e2e8f0; /* slate-200 */ backdrop-filter: blur(8px); } .dark .dd-button:hover:not(:disabled) { border-color: rgb(6 182 212 / 0.4); /* cyan-500/40 */ background-color: rgb(30 41 59 / 0.6); color: #a5f3fc; /* cyan-200 */ } .dark .dd-button:focus-visible { border-color: rgb(6 182 212 / 0.6); box-shadow: 0 0 0 3px rgb(6 182 212 / 0.25); } .dark .dd-chevron { color: #64748b; } /* slate-500 */ .dark .dd-panel { border-color: rgb(51 65 85 / 0.8); background-color: #0f172a; /* slate-900 */ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5); } .dark .dd-option { color: #cbd5e1; } /* slate-300 */ .dark .dd-option[data-active="true"] { background-color: rgb(30 41 59 / 0.7); color: #ffffff; } .dark .dd-option[aria-selected="true"] { color: #67e8f9; } /* cyan-300 */ .dark .dd-option[aria-selected="true"][data-active="true"] { background-color: rgb(6 182 212 / 0.1); } .dark .dd-check { color: #22d3ee; } /* cyan-400 */