/* ============================================================ components/select.css — Majestic V2 select & multi-select ------------------------------------------------------------ Track B. A native Log channel Menus portal to (.majestic-select-menu) so clipping and stacking contexts can't trap them; on a narrow phone the menu becomes a bottom sheet. Every option value stays a string. ============================================================ */ /* Native select is styled while unenhanced (progressive fallback), then hidden once the combobox mounts. */ .majestic-control[data-majestic-select] { cursor: pointer; color: var(--text-color); } .majestic-control[data-majestic-select][hidden] { display: none; } .majestic-control[data-majestic-select]:not([hidden]) ~ .majestic-field__label { top: 0; color: var(--text-muted-color); background: var(--field-surface); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .majestic-field__control:has(.majestic-control[data-majestic-select][required]:not([hidden])) .majestic-field__label::after { content: " *"; color: var(--danger-color); } /* --- Trigger (fills the field control) ------------------------------------ */ .majestic-select { order: 0; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; min-height: calc(var(--control-height) - 2px); padding: 3px 8px 3px 12px; background: transparent; color: var(--text-color); font: inherit; font-size: 0.875rem; cursor: pointer; } .majestic-select:focus { outline: none; } .majestic-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .majestic-select__value--placeholder { color: var(--text-subtle-color); } .majestic-select__value .majestic-select-option-icon { margin-right: 6px; } .majestic-select__chevron { flex: 0 0 auto; display: inline-flex; color: var(--text-muted-color); transition: transform var(--motion-default) var(--ease-out); } .majestic-select__chevron .majestic-icon { width: 1rem; height: 1rem; } .majestic-select[aria-expanded="true"] .majestic-select__chevron { transform: rotate(180deg); } /* Optional inline clear action for a clearable single select. */ .majestic-select__clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; color: var(--text-muted-color); background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .majestic-select__clear .majestic-icon { width: 0.85rem; height: 0.85rem; } .majestic-select__clear:hover { color: var(--text-color); background: var(--surface-hover); } .majestic-select__clear:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; } /* --- Multi-select pills (up to two rows, then +N) ------------------------- */ .majestic-select--multi { flex-wrap: wrap; padding-block: 4px; } .majestic-select__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; max-height: calc(2 * 26px + 4px); overflow: hidden; } .majestic-select--open .majestic-select__pills { max-height: none; } .majestic-select__pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 4px 0 9px; color: var(--text-color); background: var(--surface-3); border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-size: 0.75rem; line-height: 1; } .majestic-select__pill-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .majestic-select__pill-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; color: var(--text-muted-color); background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .majestic-select__pill-remove:hover { color: var(--text-color); background: var(--surface-hover); } .majestic-select__pill-remove:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; } .majestic-select__pill-remove .majestic-icon { width: 0.7rem; height: 0.7rem; } .majestic-select__overflow { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; color: var(--text-muted-color); background: transparent; border: 1px dashed var(--border-color-strong); border-radius: var(--radius-pill); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .majestic-select--disabled { cursor: not-allowed; opacity: 0.6; } .majestic-select--disabled, .majestic-select--disabled * { cursor: not-allowed; } /* --- Portal menu ---------------------------------------------------------- */ .majestic-select-menu { position: fixed; z-index: var(--z-dropdown); display: none; flex-direction: column; max-height: min(320px, 60vh); background: var(--dropdown-bg); border: 1px solid var(--border-color-strong); border-radius: var(--radius-inner); box-shadow: var(--shadow-floating); overflow: hidden; font-family: var(--font-input); } .majestic-select-menu--open { display: flex; } .majestic-select-menu__search { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border-color); } .majestic-select-menu__search .majestic-icon { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--text-muted-color); } .majestic-select-menu__search input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 4px; color: var(--text-color); background: transparent; border: 0; outline: none; font: inherit; font-size: 0.875rem; } .majestic-select-menu__search input::placeholder { color: var(--text-subtle-color); } .majestic-select-menu__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; scrollbar-width: thin; } .majestic-select-menu__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; padding: 6px 8px; border-top: 1px solid var(--border-color); } .majestic-select-menu__limit { color: var(--warning-color); font-size: 0.6875rem; line-height: 1.3; } /* Virtualization: an inner spacer sizes the scroll area, rows are absolutely positioned by the runtime through a translateY offset. */ .majestic-select-menu__viewport { position: relative; width: 100%; } .majestic-select-menu__viewport .majestic-select-option { position: absolute; left: 0; right: 0; } .majestic-select-group__label { padding: 8px 10px 4px; color: var(--text-subtle-color); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .majestic-select-option { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; color: var(--text-color); border-radius: calc(var(--radius-inner) - 2px); font-size: 0.875rem; line-height: 1.35; cursor: pointer; scroll-margin: 4px; } .majestic-select-option__label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .majestic-select-option__label mark { color: var(--primary-color); background: transparent; font-weight: 650; } .majestic-select-option__check { flex: 0 0 auto; display: inline-flex; color: var(--primary-color); opacity: 0; } .majestic-select-option__check .majestic-icon { width: 1rem; height: 1rem; } .majestic-select-option-icon { flex: 0 0 auto; display: inline-flex; color: var(--text-muted-color); } .majestic-select-option--active { background: var(--surface-hover); } .majestic-select-option--selected { color: var(--primary-color); } .majestic-select-option--selected .majestic-select-option__check { opacity: 1; } .majestic-select-option--disabled { color: var(--text-subtle-color); cursor: not-allowed; opacity: 0.7; } @media (pointer: coarse) { .majestic-select-option { min-height: 44px; } .majestic-select-menu__search input { height: 40px; font-size: 1rem; } } /* --- Source-registry status rows (loading / error / empty) ---------------- */ .majestic-select-status { display: flex; align-items: center; gap: 8px; padding: 10px; color: var(--text-muted-color); font-size: 0.8125rem; } .majestic-select-status .majestic-icon { width: 1rem; height: 1rem; } .majestic-select-status--error { color: var(--danger-color); } .majestic-select-status__retry { margin-left: auto; } .majestic-select-status__spinner { width: 1rem; height: 1rem; border: 2px solid var(--border-color-strong); border-top-color: var(--primary-color); border-radius: 50%; animation: majestic-select-spin 0.7s linear infinite; } @keyframes majestic-select-spin { to { transform: rotate(360deg); } } /* --- Bottom sheet on narrow phones ---------------------------------------- */ .majestic-select-menu__backdrop { position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1); display: none; background: var(--overlay-background); } .majestic-select-menu__backdrop--open { display: block; } @media (max-width: 40rem) { .majestic-select-menu--sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: 100% !important; max-height: 70vh; border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom: 0; animation: majestic-select-sheet-in var(--motion-expressive) var(--ease-out); } @keyframes majestic-select-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } } /* --- Reduced motion & forced colors --------------------------------------- */ @media (prefers-reduced-motion: reduce) { .majestic-select__chevron, .majestic-select-menu--sheet { transition-duration: 0.01ms; animation: none; } .majestic-select-status__spinner { animation-duration: 1.4s; } } @media (forced-colors: active) { .majestic-select-menu { border: 1px solid ButtonText; } .majestic-select-option--active { background: Highlight; color: HighlightText; } .majestic-select-option--selected { color: Highlight; } .majestic-select__pill { border-color: ButtonText; } }