|
|
/* ── Trigger ──────────────────────────────────────────────────────────────
|
|
|
* Air relied on the Button recipe via .air-button class. Eidos applies a
|
|
|
* baseline button envelope here. Consumes Capa 2 directly (same as Dialog
|
|
|
* trigger). Consumers can override per-instance via inline tokens.
|
|
|
*/
|
|
|
[data-popover-trigger] {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
height: var(--control-height-md);
|
|
|
padding-inline: var(--space-3);
|
|
|
border: 1px solid var(--color-border-default);
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-surface-raised);
|
|
|
color: var(--color-content-primary);
|
|
|
font: inherit;
|
|
|
font-size: var(--popover-trigger-font-size);
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background var(--duration-fast) var(--ease-default),
|
|
|
border-color var(--duration-fast) var(--ease-default);
|
|
|
}
|
|
|
|
|
|
[data-popover-trigger]:hover:not([disabled]):not([data-disabled]) {
|
|
|
background: var(--color-surface-overlay);
|
|
|
border-color: var(--color-border-strong);
|
|
|
}
|
|
|
|
|
|
[data-popover-trigger][data-state='open'] {
|
|
|
background: var(--color-surface-overlay);
|
|
|
border-color: var(--color-border-strong);
|
|
|
}
|
|
|
|
|
|
[data-popover-trigger]:focus-visible {
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
outline-offset: var(--focus-ring-offset);
|
|
|
}
|
|
|
|
|
|
/* ── Overlay (optional, modal popovers only) ─────────────────────────── */
|
|
|
[data-popover-overlay] {
|
|
|
position: fixed;
|
|
|
inset: 0;
|
|
|
background: var(--popover-overlay-bg);
|
|
|
z-index: var(--popover-overlay-z);
|
|
|
}
|
|
|
|
|
|
/* The popover's floating wrapper is `position: fixed` but has no explicit
|
|
|
* z-index unless the content provides one via `getComputedStyle().zIndex`,
|
|
|
* which only works for positioned elements. When modal=true, the overlay
|
|
|
* (z=60) would otherwise paint over the wrapper, hiding the panel and
|
|
|
* making it unclickable. Soma exposes a public floating wrapper marker for
|
|
|
* cross-layer styling, so Eidos does not depend on Soma internals here. */
|
|
|
[data-floating-wrapper]:has(> [data-popover-content]) {
|
|
|
z-index: var(--popover-content-z);
|
|
|
}
|
|
|
|
|
|
[data-popover-overlay][data-state='open'] {
|
|
|
animation: popover-overlay-in var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
[data-popover-overlay][data-state='closed'] {
|
|
|
animation: popover-overlay-out var(--duration-fast) var(--ease-default) both;
|
|
|
}
|
|
|
|
|
|
@keyframes popover-overlay-in {
|
|
|
from { opacity: 0; }
|
|
|
}
|
|
|
@keyframes popover-overlay-out {
|
|
|
to { opacity: 0; }
|
|
|
}
|
|
|
|
|
|
/* ── Content ──────────────────────────────────────────────────────────── */
|
|
|
/* `size` controls PHYSICAL panel size (padding + width). Typography
|
|
|
* stays constant — size and font-size are independent concerns. Override
|
|
|
* `--popover-font-size` at recipe / theme level to change body type. */
|
|
|
[data-popover-content] {
|
|
|
--_popover-py: var(--popover-padding-y-md);
|
|
|
--_popover-px: var(--popover-padding-x-md);
|
|
|
--_popover-base-width: var(--popover-min-width-md);
|
|
|
--_popover-width: var(
|
|
|
--_popover-content-width-override,
|
|
|
var(--_popover-match-anchor-width, var(--_popover-base-width))
|
|
|
);
|
|
|
--_popover-max-width: var(--_popover-content-max-width-override, var(--popover-max-width));
|
|
|
--_popover-max-height: var(
|
|
|
--_popover-content-max-height-override,
|
|
|
var(--soma-popover-content-available-height, calc(100dvh - var(--space-4)))
|
|
|
);
|
|
|
|
|
|
display: grid;
|
|
|
box-sizing: border-box;
|
|
|
gap: var(--popover-gap);
|
|
|
inline-size: min(var(--_popover-width), var(--_popover-max-width), calc(100vw - var(--space-4)));
|
|
|
min-inline-size: var(--_popover-content-min-width-override, auto);
|
|
|
max-inline-size: min(var(--_popover-max-width), calc(100vw - var(--space-4)));
|
|
|
block-size: var(--_popover-content-height-override, auto);
|
|
|
min-block-size: var(--_popover-content-min-height-override, auto);
|
|
|
max-block-size: var(--_popover-max-height);
|
|
|
padding: var(--_popover-py) var(--_popover-px);
|
|
|
overflow: auto;
|
|
|
border: var(--popover-border-width) solid var(--popover-border);
|
|
|
border-radius: var(--popover-radius);
|
|
|
background: var(--popover-bg);
|
|
|
color: var(--popover-color);
|
|
|
box-shadow: var(--popover-shadow);
|
|
|
transform-origin: var(--soma-popover-content-transform-origin, center);
|
|
|
font-family: var(--popover-font-family);
|
|
|
font-size: var(--popover-font-size);
|
|
|
font-weight: var(--popover-font-weight);
|
|
|
line-height: var(--popover-line-height);
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
[data-popover-content][data-size='sm'] {
|
|
|
--_popover-py: var(--popover-padding-y-sm);
|
|
|
--_popover-px: var(--popover-padding-x-sm);
|
|
|
--_popover-base-width: var(--popover-min-width-sm);
|
|
|
}
|
|
|
|
|
|
[data-popover-content][data-size='lg'] {
|
|
|
--_popover-py: var(--popover-padding-y-lg);
|
|
|
--_popover-px: var(--popover-padding-x-lg);
|
|
|
--_popover-base-width: var(--popover-min-width-lg);
|
|
|
}
|
|
|
|
|
|
[data-popover-content][data-size='xl'] {
|
|
|
--_popover-py: var(--popover-padding-y-xl);
|
|
|
--_popover-px: var(--popover-padding-x-xl);
|
|
|
--_popover-base-width: var(--popover-min-width-xl);
|
|
|
}
|
|
|
|
|
|
/* ── Content entrance/exit per anchored side ─────────────────────────────
|
|
|
* Soma's Floating layer writes `data-side` (top/right/bottom/left) on
|
|
|
* Content based on the resolved placement. The popover slides into place
|
|
|
* FROM the trigger edge (i.e., 'top' side = popover above the trigger,
|
|
|
* slides UP from below).
|
|
|
*
|
|
|
* Air calls this 'revelation'. ~180ms entrance / 120ms exit. Fade + small
|
|
|
* translate (4px) + scale (0.985 → 1).
|
|
|
*/
|
|
|
[data-popover-content][data-state='open'][data-side='top'] {
|
|
|
animation: popover-in-top var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
[data-popover-content][data-state='closed'][data-side='top'] {
|
|
|
animation: popover-out-top var(--duration-fast) var(--ease-default) both;
|
|
|
}
|
|
|
|
|
|
[data-popover-content][data-state='open'][data-side='bottom'] {
|
|
|
animation: popover-in-bottom var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
[data-popover-content][data-state='closed'][data-side='bottom'] {
|
|
|
animation: popover-out-bottom var(--duration-fast) var(--ease-default) both;
|
|
|
}
|
|
|
|
|
|
[data-popover-content][data-state='open'][data-side='right'] {
|
|
|
animation: popover-in-right var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
[data-popover-content][data-state='closed'][data-side='right'] {
|
|
|
animation: popover-out-right var(--duration-fast) var(--ease-default) both;
|
|
|
}
|
|
|
|
|
|
[data-popover-content][data-state='open'][data-side='left'] {
|
|
|
animation: popover-in-left var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
[data-popover-content][data-state='closed'][data-side='left'] {
|
|
|
animation: popover-out-left var(--duration-fast) var(--ease-default) both;
|
|
|
}
|
|
|
|
|
|
@keyframes popover-in-top {
|
|
|
from { opacity: 0; transform: translateY(4px) scale(0.985); }
|
|
|
}
|
|
|
@keyframes popover-out-top {
|
|
|
to { opacity: 0; transform: translateY(4px) scale(0.985); }
|
|
|
}
|
|
|
|
|
|
@keyframes popover-in-bottom {
|
|
|
from { opacity: 0; transform: translateY(-4px) scale(0.985); }
|
|
|
}
|
|
|
@keyframes popover-out-bottom {
|
|
|
to { opacity: 0; transform: translateY(-4px) scale(0.985); }
|
|
|
}
|
|
|
|
|
|
@keyframes popover-in-right {
|
|
|
from { opacity: 0; transform: translateX(-4px) scale(0.985); }
|
|
|
}
|
|
|
@keyframes popover-out-right {
|
|
|
to { opacity: 0; transform: translateX(-4px) scale(0.985); }
|
|
|
}
|
|
|
|
|
|
@keyframes popover-in-left {
|
|
|
from { opacity: 0; transform: translateX(4px) scale(0.985); }
|
|
|
}
|
|
|
@keyframes popover-out-left {
|
|
|
to { opacity: 0; transform: translateX(4px) scale(0.985); }
|
|
|
}
|
|
|
|
|
|
/* ── Arrow (optional) ─────────────────────────────────────────────────────
|
|
|
* Soma's FloatingArrow renders `<span data-popover-arrow>` with inline
|
|
|
* positioning styles + an SVG triangle inside. The fill and the outline are
|
|
|
* split so the border is drawn only on the two exposed sides; drawing a stroke
|
|
|
* on the polygon itself also paints the base edge and makes the arrow look
|
|
|
* detached from the panel.
|
|
|
*
|
|
|
* The SVG uses `viewBox="0 0 30 10"` with `preserveAspectRatio="none"`, so
|
|
|
* stroke widths declared in user units get scaled to sub-pixel values (the
|
|
|
* X scale is 10/30 = 0.33). `vector-effect: non-scaling-stroke` keeps the
|
|
|
* stroke at device-pixel width regardless of the viewBox transform — without
|
|
|
* it the border outline of the arrow vanishes against the page background.
|
|
|
*
|
|
|
* `overflow: visible` on the SVG lets the stroke extend slightly past the
|
|
|
* viewBox bounds; otherwise the half of the stroke that sits outside gets
|
|
|
* clipped. */
|
|
|
[data-popover-arrow] svg {
|
|
|
display: block;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
[data-popover-arrow] polygon {
|
|
|
fill: var(--popover-bg);
|
|
|
stroke: none;
|
|
|
}
|
|
|
|
|
|
[data-popover-arrow] path {
|
|
|
stroke: var(--popover-border);
|
|
|
stroke-width: var(--popover-border-width);
|
|
|
stroke-linecap: round;
|
|
|
stroke-linejoin: round;
|
|
|
vector-effect: non-scaling-stroke;
|
|
|
}
|
|
|
|
|
|
/* ── Close button ──────────────────────────────────────────────────────
|
|
|
* Default sizing is auto-fit (text labels like "Close" or "Dismiss" fit
|
|
|
* naturally). For icon-only close buttons (× glyph), the consumer sets
|
|
|
* `data-icon-only` on `<Popover.Close>` to switch to a fixed square. */
|
|
|
[data-popover-close] {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-block-size: var(--popover-close-size);
|
|
|
padding-inline: var(--space-3);
|
|
|
border: var(--popover-close-border-width) solid var(--popover-close-border);
|
|
|
border-radius: var(--popover-close-radius);
|
|
|
background: var(--popover-close-bg);
|
|
|
color: var(--popover-close-color);
|
|
|
box-shadow: none;
|
|
|
font: inherit;
|
|
|
font-size: var(--popover-close-font-size);
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background var(--popover-transition-duration) var(--popover-transition-ease),
|
|
|
border-color var(--popover-transition-duration) var(--popover-transition-ease),
|
|
|
color var(--popover-transition-duration) var(--popover-transition-ease),
|
|
|
box-shadow var(--popover-transition-duration) var(--popover-transition-ease);
|
|
|
}
|
|
|
|
|
|
[data-popover-close][data-icon-only] {
|
|
|
inline-size: var(--popover-close-size);
|
|
|
block-size: var(--popover-close-size);
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
[data-popover-close]:hover {
|
|
|
background: var(--popover-close-bg-hover);
|
|
|
border-color: var(--popover-close-border-hover);
|
|
|
}
|
|
|
|
|
|
[data-popover-close]:focus-visible {
|
|
|
outline: none;
|
|
|
box-shadow: var(--focus-ring);
|
|
|
}
|
|
|
|
|
|
/* ── data-last-action exit tinting (mirrors Dialog/Drawer) ──────────────
|
|
|
* Prewrite writes `data-last-action` BEFORE state flips to 'closed'.
|
|
|
* Tint the trigger-facing edge (opposite to data-side) during the exit
|
|
|
* animation so the user gets a brief tinted flash by causa of the close.
|
|
|
*/
|
|
|
[data-popover-content][data-state='closed'][data-side='top'][data-last-action='saved'] { border-bottom: 2px solid var(--color-fulfill-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='bottom'][data-last-action='saved'] { border-top: 2px solid var(--color-fulfill-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='right'][data-last-action='saved'] { border-left: 2px solid var(--color-fulfill-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='left'][data-last-action='saved'] { border-right: 2px solid var(--color-fulfill-element); }
|
|
|
|
|
|
[data-popover-content][data-state='closed'][data-side='top'][data-last-action='failed'] { border-bottom: 2px solid var(--color-threat-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='bottom'][data-last-action='failed'] { border-top: 2px solid var(--color-threat-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='right'][data-last-action='failed'] { border-left: 2px solid var(--color-threat-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='left'][data-last-action='failed'] { border-right: 2px solid var(--color-threat-element); }
|
|
|
|
|
|
[data-popover-content][data-state='closed'][data-side='top'][data-last-action='cancelled'],
|
|
|
[data-popover-content][data-state='closed'][data-side='top'][data-last-action='dismissed'],
|
|
|
[data-popover-content][data-state='closed'][data-side='top'][data-last-action='dismissed-outside'] { border-bottom: 2px solid var(--color-neutral-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='bottom'][data-last-action='cancelled'],
|
|
|
[data-popover-content][data-state='closed'][data-side='bottom'][data-last-action='dismissed'],
|
|
|
[data-popover-content][data-state='closed'][data-side='bottom'][data-last-action='dismissed-outside'] { border-top: 2px solid var(--color-neutral-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='right'][data-last-action='cancelled'],
|
|
|
[data-popover-content][data-state='closed'][data-side='right'][data-last-action='dismissed'],
|
|
|
[data-popover-content][data-state='closed'][data-side='right'][data-last-action='dismissed-outside'] { border-left: 2px solid var(--color-neutral-element); }
|
|
|
[data-popover-content][data-state='closed'][data-side='left'][data-last-action='cancelled'],
|
|
|
[data-popover-content][data-state='closed'][data-side='left'][data-last-action='dismissed'],
|
|
|
[data-popover-content][data-state='closed'][data-side='left'][data-last-action='dismissed-outside'] { border-right: 2px solid var(--color-neutral-element); }
|
