49 lines
2.3 KiB
Svelte
49 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
label = 'More information',
|
|
title,
|
|
text
|
|
}: {
|
|
label?: string;
|
|
title: string;
|
|
text: string;
|
|
} = $props();
|
|
|
|
let root: HTMLDetailsElement;
|
|
let open = $state(false);
|
|
|
|
$effect(() => {
|
|
if (!open) return;
|
|
const closeOutside = (event: PointerEvent) => {
|
|
if (!root.contains(event.target as Node)) open = false;
|
|
};
|
|
const closeOnEscape = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
open = false;
|
|
root.querySelector<HTMLElement>('summary')?.focus();
|
|
}
|
|
};
|
|
document.addEventListener('pointerdown', closeOutside);
|
|
document.addEventListener('keydown', closeOnEscape);
|
|
return () => {
|
|
document.removeEventListener('pointerdown', closeOutside);
|
|
document.removeEventListener('keydown', closeOnEscape);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<details bind:this={root} bind:open class="info-popover">
|
|
<summary aria-label={label}>i</summary>
|
|
<div class="info-popover-panel" role="note">
|
|
<strong>{title}</strong>
|
|
<p>{text}</p>
|
|
</div>
|
|
</details>
|
|
|
|
<style>
|
|
.info-popover{position:relative}.info-popover summary{width:28px;height:28px;display:grid;place-items:center;list-style:none;border:1px solid var(--shd-border-strong);background:var(--shd-surface);color:var(--shd-text-muted);font-family:var(--shd-font-editorial);font-size:13px;font-style:italic;font-weight:700;cursor:pointer}.info-popover summary::-webkit-details-marker{display:none}.info-popover summary:hover,.info-popover summary:focus-visible,.info-popover[open] summary{border-color:var(--shd-orange);background:var(--shd-surface-active);color:var(--shd-orange)}.info-popover-panel{position:absolute;z-index:9;top:calc(100% + 6px);right:0;width:min(290px,calc(100vw - 32px));display:grid;gap:5px;padding:10px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:8px 12px 28px #0009}.info-popover-panel strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.info-popover-panel p{margin:0;color:var(--shd-text-muted);font:var(--shd-type-supporting)/1.5 var(--shd-font-editorial)}
|
|
@media(max-width:600px){.info-popover summary{width:44px;height:44px}.info-popover-panel{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto}}
|
|
@media(prefers-reduced-motion:reduce){.info-popover summary{transition:none}}
|
|
</style>
|