/* ============================================================
POPOVER — an anchored floating surface
------------------------------------------------------------
Classer dans :
…
THE SHELL HAS NO PADDING. It owns the glass, the shadow, the
corner and the position — nothing else. Content brings its own
padding through the three slots, so a list or a menu can sit
flush against the edges while text gets its margin.
Placement is a REQUEST, not a result. js/popover.js measures the
viewport and flips the popover when it would overflow, then
writes the outcome to data-actual-placement — which is what the
CSS reads. Ask for `top`, land on `bottom`, and the animation
still grows from the right corner.
data-placement top · bottom · left · right (bottom)
cover-tl · cover-tr · cover-bl · cover-br
data-align start · center · end (center)
The cover placements overlap the trigger instead of sitting
beside it: the popover takes the trigger's place, which is what
a picker wants.
Width comes from the .w-* utilities — a popover is not a size,
it is a surface at a width.
IT LIVES IN THE TOP LAYER. The [popover] attribute is not a
nicety here, it is the only thing that works: every panel in this
product carries a backdrop-filter, and a filtered ancestor
becomes the containing block of any position:fixed inside it —
so a popover nested in a glass card is measured from that card
instead of the viewport, and trapped under its stacking context.
The top layer is outside both. That is also why there is no
z-index here: nothing can be above the top layer.
============================================================ */
.ice-popover {
position: fixed;
/* The UA sets `inset: 0` on every [popover] and centres it with
auto margins. Left with an end offset of 0, the box stretches
to the full height of the viewport — and the positioner then
measures that. Only the two start sides are ours to set. */
inset: 0 auto auto 0;
min-inline-size: var(--w-150);
/* The UA dresses every [popover] with a border, padding, a margin
and fit-content sizing. All four have to go. */
margin: 0;
padding: 0;
block-size: auto;
overflow: visible;
/* max-content, not the UA's fit-content: a shrink-to-fit box is
measured against the room left of it, so the panel came out
one width while it sat at 0,0 and a narrower one once the
positioner had moved it near the right edge — and its text
re-wrapped. max-content does not depend on where it is. The
.w-* utility caps it. */
inline-size: max-content;
max-inline-size: calc(100vw - var(--space-16) * 2);
/* Elevation 3, carrying shadow S rather than its own — the same
borrowing the stepper's done node makes. Figma 93:20638. */
border-radius: var(--radius-16);
border: var(--elev-primary-3-border-w) solid;
border-color: var(--elev-primary-3-border-lit) var(--elev-primary-3-border-lit)
var(--elev-primary-3-border) var(--elev-primary-3-border);
background-image: var(--elev-primary-3-image);
box-shadow: var(--shadow-s);
backdrop-filter: blur(var(--shadow-s-blur));
-webkit-backdrop-filter: blur(var(--shadow-s-blur));
color: var(--fg-high);
/* The UA takes it out of the flow when closed, so the state here
is only the fade. data-open goes on one frame AFTER it is shown,
which is what lets the positioner measure it first and the
animation start from the corner it actually landed on.
`allow-discrete` on display and overlay is what keeps it in the
top layer long enough to fade back out. */
opacity: 0;
transform: scale(.97);
transform-origin: center top; /* the positioner rewrites this */
transition: opacity var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
overlay var(--dur-fast) allow-discrete,
display var(--dur-fast) allow-discrete;
}
.ice-popover[data-open] {
opacity: 1;
transform: scale(1);
}
/* --- The content box -----------------------------------------
A padded column. Everything a popover holds — a field, a list, a
row of buttons — is a child of this at a gap of 12.
Figma 94:20722. */
.ice-popover__body {
display: flex;
flex-direction: column;
gap: var(--space-12);
padding: var(--space-12);
}
/* A row of buttons, pushed to the end. No rule above it: the gap
is the separation. */
.ice-popover__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-8);
}
/* --- Close ---------------------------------------------------
Not an .ice-icon-btn: that one is a 16 glyph in a box, and this
is a bare 24 (Icon L) sitting in the corner. It is chrome, so it
sits closer to the edge than the content's own padding.
Figma 93:20638. */
.ice-popover__close {
position: absolute;
inset-block-start: var(--space-16);
inset-inline-end: var(--space-16);
display: flex;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: var(--fg-icon-low);
transition: color var(--dur-fast) var(--ease-out);
}
.ice-popover__close > .ice-icon {
inline-size: var(--icon-l);
block-size: var(--icon-l);
}
.ice-popover__close:hover { color: var(--fg-link); }
/* --- Text ---------------------------------------------------- */
.ice-popover__title {
/* Flex, not inline: .ice-icon is display:block, so a leading icon
would otherwise take a line of its own above the title. */
display: flex;
align-items: center;
gap: var(--space-8);
font-size: var(--type-h6-size);
font-weight: var(--weight-medium);
line-height: var(--type-h6-leading);
letter-spacing: var(--type-h6-track);
color: var(--fg-high);
}
.ice-popover__title > .ice-icon { color: var(--fg-icon-high); }
.ice-popover__text {
font-size: var(--type-body-s-size);
line-height: var(--type-body-s-leading);
letter-spacing: var(--type-body-s-track);
color: var(--fg-medium);
}
.ice-popover__title + .ice-popover__text { margin-block-start: var(--space-4); }
/* --- A list of choices — Figma 94:20722 ----------------------
Long lists scroll rather than growing the popover past the
screen. The cap is mine — there is no drawn maximum. */
.ice-popover__list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-block-start: var(--space-8);
max-block-size: var(--w-300);
overflow-y: auto;
}
/* A row filtered out by the search is gone, not dimmed. */
.ice-popover__item[hidden] { display: none; }
/* Nothing matched. */
.ice-popover__empty {
padding: var(--space-8) var(--space-12);
font-size: var(--type-body-m-size);
line-height: var(--type-body-m-leading);
letter-spacing: var(--type-body-m-track);
color: var(--fg-low);
}
/* The section label above a list. */
.ice-popover__label {
display: flex;
align-items: center;
padding: var(--space-6) var(--space-12);
font-size: var(--type-caps-m-size);
font-weight: var(--weight-semibold);
line-height: var(--type-caps-m-leading);
letter-spacing: var(--type-caps-m-track);
text-transform: uppercase;
color: var(--fg-low);
}
.ice-popover__item {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-6);
border: 0;
background-color: transparent;
text-align: start;
cursor: pointer;
font-size: var(--type-body-l-size);
font-weight: var(--weight-medium);
line-height: var(--type-body-l-leading);
letter-spacing: var(--type-body-l-track);
color: var(--fg-medium);
transition: background-image var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.ice-popover__item > .ice-icon { color: var(--fg-icon-medium); }
/* Hovered, a row sinks into the page rather than lifting off it —
the same answer a toggle item gives.
[data-active] is the keyboard's cursor, and it is deliberately the
SAME look: the arrow keys and the pointer are pointing at the same
thing, so they should not say it two different ways. */
.ice-popover__item:hover,
.ice-popover__item[data-active] {
color: var(--fg-link);
background-image: var(--elev-secondary-0-image);
}
.ice-popover__item:hover > .ice-icon,
.ice-popover__item[data-active] > .ice-icon { color: var(--fg-link); }
/* Chosen: one rung deeper, and pressed in. It keeps that look
under the cursor — where you are does not change on hover. */
.ice-popover__item[data-selected],
.ice-popover__item[data-selected]:hover {
color: var(--fg-high);
background-image: var(--elev-secondary-1-image);
box-shadow: var(--shadow-inner-s);
}
.ice-popover__item[data-selected] > .ice-icon,
.ice-popover__item[data-selected]:hover > .ice-icon { color: var(--fg-icon-high); }