/* Shared field-type kit - searchable/creatable combobox (livex-review-form-handoff). Surface-agnostic: each token falls back from the app's --lvxd-* to the Storefront's --lvxd-sf-*, same fallback-chaining pattern as lvxd-shared.css, so one component serves both surfaces in Light/Dim/Dark without a per-surface copy. No new colours - only existing theme tokens. */ .lvxd-cb { position: relative; display: flex; flex-direction: column; } .lvxd-cb-native-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lvxd-cb-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; } .lvxd-cb-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lvxd-cb-value.is-placeholder { color: var(--lvxd-text-faint, var(--lvxd-sf-text-faint)); } .lvxd-cb-caret { flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--lvxd-text-muted, var(--lvxd-sf-text-muted)); border-bottom: 2px solid var(--lvxd-text-muted, var(--lvxd-sf-text-muted)); transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s ease; } .lvxd-cb.is-open .lvxd-cb-caret { transform: rotate(-135deg) translate(-2px, -2px); } .lvxd-cb.is-open .lvxd-cb-control { border-color: var(--lvxd-accent, var(--lvxd-sf-accent)); box-shadow: 0 0 0 4px var(--lvxd-accent-soft, var(--lvxd-sf-accent-soft)); } .lvxd-cb-invalid .lvxd-cb-control { border-color: var(--lvxd-danger, var(--lvxd-sf-danger)); } /* Positioned against the VIEWPORT while open - position:fixed, with the geometry written inline by the widget's place(), which is also what re-unites the panel with its trigger after open() moves it to . It used to be absolute at top:calc(100% + 6px); left:0; right:0 inside the wrapper, which was wrong in two ways at once on Team's member accordion: - Clipped. Any ancestor with overflow:hidden cuts a positioned descendant off, and .lvxd-workspace-team-accordion has it for its rounded corners - so the option list ended at the card's edge with no way to reach the rest. position:fixed on its own does NOT escape that: a fixed element is still clipped once something between it and that ancestor carries a transform, and the rows permanently do. Hence the reparenting in open(); this rule is what then lands the panel back on its trigger, with place() clamping the list to the room available. - Mis-sized. left/right:0 sizes the panel to the WRAPPER, not to the trigger. A role picker capped at 160px by .lvxd-workspace-access-role sitting in a full-width product card therefore dropped a full-width panel. The trigger's width now arrives inline as min-width instead. z-index sits above the sticky topbar (20), the command palette (30/60) and the shell's own header dropdowns (900), and below the notifications drawer (999/1000) and the toast/tooltip layers. */ .lvxd-cb-panel { position: fixed; top: 0; left: 0; /* Caps a long option label rather than letting one stretch the panel across the page. An inline min-width wider than this still wins - min-width beats max-width - so a 380px field keeps a 380px panel. */ max-width: min(360px, calc(100vw - 16px)); z-index: 950; display: none; background: var(--lvxd-surface, var(--lvxd-sf-surface)); border: 1.5px solid var(--lvxd-border, var(--lvxd-sf-border)); border-radius: 12px; box-shadow: 0 16px 40px rgba(11, 20, 55, .16); overflow: hidden; animation: lvxd-cb-drop .15s both; } /* Keyed off the PANEL's own class, not `.lvxd-cb.is-open .lvxd-cb-panel`: while open the panel is moved to (see the widget's open()), so a descendant selector rooted at the wrapper would stop matching the moment it is needed. */ .lvxd-cb-panel.is-open { display: block; } /* Opacity only - the 6px slide this used to open with had to go when the panel became position:fixed. getBoundingClientRect reports the TRANSFORMED box, so the widget's place() would have had to cancel the animation to measure a true origin, and cancelling restarts it: focusing the search box on open can scroll the field into view, which re-places the panel, which would have restarted the slide on every frame of that scroll. A fade reads the same and measures honestly. */ @keyframes lvxd-cb-drop { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lvxd-cb-panel { animation: none; } .lvxd-cb-caret { transition: none; } } .lvxd-cb-search { padding: 9px; border-bottom: 1px solid var(--lvxd-border, var(--lvxd-sf-border)); background: var(--lvxd-surface-muted, var(--lvxd-sf-surface-tint)); } .lvxd-cb-search-input { width: 100%; height: 36px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--lvxd-text, var(--lvxd-sf-text)); background: var(--lvxd-surface, var(--lvxd-sf-surface)); border: 1.5px solid var(--lvxd-border, var(--lvxd-sf-border)); border-radius: 8px; outline: none; } .lvxd-cb-search-input:focus { border-color: var(--lvxd-accent, var(--lvxd-sf-accent)); } .lvxd-cb-list { max-height: 190px; overflow-y: auto; padding: 6px; } .lvxd-cb-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left; color: var(--lvxd-text, var(--lvxd-sf-text)); background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .lvxd-cb-option:hover, .lvxd-cb-option.is-active { background: var(--lvxd-accent-soft, var(--lvxd-sf-accent-soft)); } .lvxd-cb-option.is-selected { color: var(--lvxd-accent, var(--lvxd-sf-accent)); } .lvxd-cb-option-create .lvxd-cb-kbd { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--lvxd-text-muted, var(--lvxd-sf-text-muted)); background: var(--lvxd-surface-muted, var(--lvxd-sf-surface-tint)); border: 1px solid var(--lvxd-border, var(--lvxd-sf-border)); border-radius: 6px; padding: 2px 6px; } .lvxd-cb-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--lvxd-text-muted, var(--lvxd-sf-text-muted)); } .lvxd-cb-help { margin-top: 4px; font-size: 12.5px; color: var(--lvxd-text-muted, var(--lvxd-sf-text-muted)); }