{
+ return new Promise(resolve => {
+ if (this.cleanup) {
+ this.cleanup();
+ this.cleanup = undefined;
+ requestAnimationFrame(() => resolve());
+ } else {
+ resolve();
+ }
+ });
+ }
+
+ @watch('active', { waitUntilFirstUpdate: true })
+ handleActiveChange() {
+ if (this.active) {
+ this.reposition();
+ } else {
+ this.stop();
+ }
+ }
+
+ @watch('arrow')
+ @watch('distance')
+ @watch('flip')
+ @watch('flipFallbackPlacement')
+ @watch('flipFallbackStrategy')
+ @watch('placement')
+ @watch('shift')
+ @watch('skidding')
+ @watch('strategy')
+ async handlePositionChange() {
+ if (this.hasUpdated && this.active) {
+ await this.updateComplete;
+ this.reposition();
+ }
+ }
+
+ /** Recalculate and repositions the popup. */
+ reposition() {
+ if (!this.anchor) {
+ throw new Error('Invalid anchor element: no child with slot="anchor" was found.');
+ }
+
+ // Nothing to do if the popup is inactive
+ if (!this.active) {
+ return;
+ }
+
+ //
+ // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware
+ //
+ const middleware = [
+ // The offset middleware goes first
+ offset({ mainAxis: this.distance, crossAxis: this.skidding })
+ ];
+
+ // Then we flip, as needed
+ if (this.flip) {
+ middleware.push(
+ flip({
+ // @ts-expect-error - We're converting a string attribute to an array here
+ //
+ // TODO - use a custom adapter for this property
+ //
+ fallbackPlacement: this.flipFallbackPlacement.split(' ').filter(p => p.trim()),
+ fallbackStrategy: this.flipFallbackStrategy
+ })
+ );
+ }
+
+ // Then we shift, as needed
+ if (this.shift) {
+ middleware.push(shift());
+ }
+
+ // Finally, we add an arrow
+ if (this.arrow) {
+ middleware.push(
+ arrow({
+ element: this.arrowEl,
+ padding: 10 // min distance from the edge, in pixels
+ })
+ );
+ }
+
+ computePosition(this.anchor, this.popupEl, {
+ placement: this.placement,
+ middleware,
+ strategy: this.strategy
+ }).then(({ x, y, middlewareData, placement }) => {
+ const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;
+
+ Object.assign(this.popupEl.style, {
+ left: `${x}px`,
+ top: `${y}px`
+ });
+
+ if (this.arrow) {
+ const arrowX = middlewareData.arrow?.x;
+ const arrowY = middlewareData.arrow?.y;
+
+ Object.assign(this.arrowEl.style, {
+ left: typeof arrowX === 'number' ? `${arrowX}px` : '',
+ top: typeof arrowY === 'number' ? `${arrowY}px` : '',
+ right: '',
+ bottom: '',
+ [staticSide]: 'calc(var(--arrow-size) * -1)'
+ });
+ }
+ });
+ }
+
+ render() {
+ return html`
+
+
+
+
+ ${this.arrow ? html`` : ''}
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'sl-popup': SlPopup;
+ }
+}
diff --git a/src/shoelace.ts b/src/shoelace.ts
index 8da0fd0c..b54c81d2 100644
--- a/src/shoelace.ts
+++ b/src/shoelace.ts
@@ -28,6 +28,7 @@ export { default as SlMenu } from './components/menu/menu';
export { default as SlMenuItem } from './components/menu-item/menu-item';
export { default as SlMenuLabel } from './components/menu-label/menu-label';
export { default as SlMutationObserver } from './components/mutation-observer/mutation-observer';
+export { default as SlPopup } from './components/popup/popup';
export { default as SlProgressBar } from './components/progress-bar/progress-bar';
export { default as SlProgressRing } from './components/progress-ring/progress-ring';
export { default as SlQrCode } from './components/qr-code/qr-code';