/* Optional: a tooltip that needs no element of its own, just one
   attribute on the trigger.

       <button aria-description="Saves without closing the dialog">Save</button>

   Two pieces make this work. The alt text of `content`, everything after the
   slash, is what assistive technology reads instead of the generated text;
   setting it empty keeps the pseudo element out of the accessible name, which
   would otherwise become "Save Saves without closing the dialog". The
   description itself comes from aria-description, so the text lives in exactly
   one place and CSS only mirrors it.

   Two things to weigh before loading this:

   - aria-description is still an ARIA 1.3 Editor's Draft. MDN recommends
     aria-describedby for the time being, and screen reader support is not
     something a DOM inspector can prove. styles/tooltip.css remains the
     dependable option; this one is the elegant one.
   - Loading this module claims aria-description for presentation. Every
     element carrying that attribute gets a visible tooltip, including ones
     that only meant to describe themselves to assistive technology.

   Escape to dismiss (WCAG 1.4.13) needs the same script as tooltip.css. */
@layer havelcss.components {
	/* anchor-scope, not just anchor-name: with a shared name every tooltip on
	   the page would follow the last trigger. Scoping it to the trigger keeps
	   each pseudo element with its own, and because the pseudo element is a
	   descendant of the trigger, that is the whole of the scope needed. A
	   pseudo element is *not* implicitly anchored to what it belongs to;
	   without this it silently lands at its static position instead. */
	@supports (anchor-scope: --havel-description) {
		[aria-description] {
			anchor-name: --havel-description;
			anchor-scope: --havel-description;
		}

		[aria-description]::after {
			content: attr(aria-description) / '';
			position: fixed;
			position-anchor: --havel-description;
			position-area: inline-end center;
			position-try-fallbacks: flip-inline, block-start, block-end;
			z-index: 1;

			/* Same transparent border as tooltip.css: it is the gap, and it keeps
			   the bubble reachable with the pointer. Hit testing on generated
			   content targets the originating element, so hovering the bubble
			   keeps the trigger hovered. */
			border: var(--space-s) solid transparent;
			border-radius: calc(var(--border-radius) + var(--space-s));
			padding: var(--space-s) var(--space-m);
			background-color: var(--color-bg-elevated);
			background-clip: padding-box;
			box-shadow: var(--shadow-strong);
			color: var(--color-text);
			inline-size: max-content;
			max-inline-size: 20rem;
			font-size: var(--font-size-small);
			white-space: pre-line;

			display: none;
			opacity: 0;
			transition: opacity var(--duration-fast), display var(--duration-fast) allow-discrete;
		}

		[aria-description]:hover::after,
		[aria-description]:focus-visible::after {
			display: block;
			opacity: 1;
		}

		@starting-style {
			[aria-description]:hover::after,
			[aria-description]:focus-visible::after {
				opacity: 0;
			}
		}
	}
}