Feature Request: A way to manually control overlays

[cuberoot]

Expected Behaviour

We should have a way to manually open or control overlays.

Actual Behaviour

Right now the only easy way to open an overlay is to use an overlay-trigger. However, not all use cases of overlays are triggered by click or hover events.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Right now you have to write code like this to manually open an overlay:

spectrum-web-components/documentation/src/components/side-nav-search.ts

Lines 74 to 115 in 83e4151

	private openPopover() {
	if (!this.popover) return;
	const overlayOpenDetail: OverlayOpenDetail = {
	content: this.popover,
	delay: 0,
	offset: 10,
	placement: 'bottom',
	trigger: this,
	interaction: 'click',
	};
	const overlayOpenEvent = new CustomEvent<OverlayOpenDetail>(
	'sp-overlay:open',
	{
	bubbles: true,
	composed: true,
	detail: overlayOpenDetail,
	}
	);
	this.dispatchEvent(overlayOpenEvent);
	}
	private closePopover() {
	if (!this.popover) return;
	const overlayCloseDetail: OverlayCloseDetail = {
	content: this.popover,
	};
	const overlayCloseEvent = new CustomEvent<OverlayCloseDetail>(
	'sp-overlay:close',
	{
	bubbles: true,
	composed: true,
	detail: overlayCloseDetail,
	}
	);
	this.dispatchEvent(overlayCloseEvent);
	}

Logs taken while reproducing problem

[Westbrook]

This gets dangerously close to pairing #402 with a "Remove the need for overlay-trigger" issue/PR pair. Should we push in that direction and make the overlay functionality some sort of mixin or module? The alternative would be to actually use an overlay-trigger element in this context and surface a manual API for OverlayOpen, possibly an attribute/method pair. Which do you think would solve this issue specifically, while also preparing the library for the most success long term?

[cuberoot]

My gut feeling is that the first option is the way to go. I don't know if we want to eliminate the overlay-trigger as it is a way to use our overlay system without having to write JS code. You can open overlays from vanilla HTML.

However, if we want to use overlays in our own code (e.g. solving #157) and allow programatic control, a mixin might be the thing. We could make overlay-trigger use the mixin...