@sky.ui/core 0.0.58 → 0.0.60

package/dist/helper/controllers/animation-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation-controller.js","sources":["../../../src/helper/controllers/animation-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/** Fill mode for WAAPI (KeyframeEffectOptions). */\nexport type FillMode = 'none' | 'forwards' | 'backwards' | 'both';\n\n/** Playback direction for WAAPI (KeyframeEffectOptions). */\nexport type AnimationDirection =\n  'normal' | 'reverse' | 'alternate' | 'alternate-reverse';\n\n/**\n * Options for a single animation run (Web Animations API).\n * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options\n */\nexport interface AnimationOptions {\n  /** Duration in milliseconds. */\n  duration?: number;\n  /** Delay before start in milliseconds. */\n  delay?: number;\n  /** Easing function (CSS easing or cubic-bezier). */\n  easing?: string;\n  /** Fill mode: 'none' | 'forwards' | 'backwards' | 'both'. */\n  fill?: FillMode;\n  /** Number of iterations (default 1). */\n  iterations?: number;\n  /** Playback direction. */\n  direction?: AnimationDirection;\n  /** End delay in milliseconds. */\n  endDelay?: number;\n  /** Unique id for the animation (useful for canceling by id). */\n  id?: string;\n}\n\n/**\n * Keyframes format accepted by Element.animate().\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats\n */\nexport type AnimationKeyframes = Keyframe[] | PropertyIndexedKeyframes;\n\n/**\n * Configuration for the controller defaults (used when not overridden per call).\n */\nexport interface AnimationControllerConfig {\n  defaultDuration?: number;\n  defaultEasing?: string;\n  defaultFill?: FillMode;\n}\n\n/** Direction for slide presets. */\nexport type SlideDirection = 'up' | 'down' | 'left' | 'right';\n\n/**\n * AnimationController – consistent animations via the Web Animations API (WAAPI).\n *\n * Use as a Lit ReactiveController so components get:\n * - Shared defaults (duration, easing, fill)\n * - Preset helpers: fadeIn, fadeOut, slideIn, slideOut, scaleIn, scaleOut\n * - Low-level animate() for custom keyframes\n * - Automatic cancellation of running animations when the host disconnects\n *\n * @example\n * ```ts\n * class MyPanel extends LitElement {\n *   animation = new AnimationController(this, { defaultDuration: 200, defaultEasing: 'ease-out' });\n *\n *   async open() {\n *     await this.animation.fadeIn(this.panelEl);\n *   }\n *\n *   async close() {\n *     await this.animation.fadeOut(this.panelEl);\n *   }\n * }\n * ```\n */\nexport class AnimationController implements ReactiveController {\n  readonly host: ReactiveControllerHost;\n  private readonly config: Required<AnimationControllerConfig>;\n  private readonly running = new Set<Animation>();\n\n  constructor(\n    host: ReactiveControllerHost,\n    config: AnimationControllerConfig = {}\n  ) {\n    this.host = host;\n    this.config = {\n      defaultDuration: config.defaultDuration ?? 200,\n      defaultEasing: config.defaultEasing ?? 'ease-out',\n      defaultFill: config.defaultFill ?? 'forwards',\n    };\n    host.addController(this);\n  }\n\n  hostDisconnected(): void {\n    this.running.forEach((a) => {\n      try {\n        a.cancel();\n      } catch {\n        // ignore\n      }\n    });\n    this.running.clear();\n  }\n\n  /**\n   * Run a WAAPI animation on an element. Returns the Animation for chaining or await .finished.\n   * Running animations are tracked and cancelled when the host disconnects.\n   */\n  animate(\n    element: Element | null | undefined,\n    keyframes: AnimationKeyframes,\n    options: AnimationOptions = {}\n  ): Animation | null {\n    if (!element) return null;\n\n    const duration = options.duration ?? this.config.defaultDuration;\n    const easing = options.easing ?? this.config.defaultEasing;\n    const fill = options.fill ?? this.config.defaultFill;\n\n    const opts: KeyframeAnimationOptions = {\n      duration,\n      delay: options.delay ?? 0,\n      easing,\n      fill,\n      iterations: options.iterations ?? 1,\n      direction: options.direction ?? 'normal',\n      endDelay: options.endDelay ?? 0,\n      id: options.id,\n    };\n\n    const animation = element.animate(keyframes as Keyframe[], opts);\n    this.running.add(animation);\n    animation.finished\n      .then(() => this.running.delete(animation))\n      .catch(() => this.running.delete(animation));\n    return animation;\n  }\n\n  /**\n   * Fade in: opacity 0 → 1.\n   */\n  fadeIn(\n    element: Element | null | undefined,\n    options: AnimationOptions = {}\n  ): Animation | null {\n    return this.animate(element, [{ opacity: 0 }, { opacity: 1 }], options);\n  }\n\n  /**\n   * Fade out: opacity 1 → 0.\n   */\n  fadeOut(\n    element: Element | null | undefined,\n    options: AnimationOptions = {}\n  ): Animation | null {\n    return this.animate(element, [{ opacity: 1 }, { opacity: 0 }], options);\n  }\n\n  /**\n   * Slide in from the given direction (translate from off-screen to 0).\n   */\n  slideIn(\n    element: Element | null | undefined,\n    options: AnimationOptions & { direction?: SlideDirection } = {}\n  ): Animation | null {\n    const dir = options.direction ?? 'down';\n    const [fromX, fromY] = slideOffset(dir, true);\n    const keyframes: Keyframe[] = [\n      { transform: `translate(${fromX}, ${fromY})` },\n      { transform: 'translate(0, 0)' },\n    ];\n    return this.animate(element, keyframes, options);\n  }\n\n  /**\n   * Slide out toward the given direction (translate from 0 to off-screen).\n   */\n  slideOut(\n    element: Element | null | undefined,\n    options: AnimationOptions & { direction?: SlideDirection } = {}\n  ): Animation | null {\n    const dir = options.direction ?? 'up';\n    const [toX, toY] = slideOffset(dir, false);\n    const keyframes: Keyframe[] = [\n      { transform: 'translate(0, 0)' },\n      { transform: `translate(${toX}, ${toY})` },\n    ];\n    return this.animate(element, keyframes, options);\n  }\n\n  /**\n   * Scale in: scale(0) or scale(0.9) → scale(1). Optionally combine with opacity.\n   */\n  scaleIn(\n    element: Element | null | undefined,\n    options: AnimationOptions & { fromScale?: number; opacity?: boolean } = {}\n  ): Animation | null {\n    const from = options.fromScale ?? 0.95;\n    const withOpacity = options.opacity !== false;\n    const keyframes: Keyframe[] = withOpacity\n      ? [\n          { transform: `scale(${from})`, opacity: 0 },\n          { transform: 'scale(1)', opacity: 1 },\n        ]\n      : [{ transform: `scale(${from})` }, { transform: 'scale(1)' }];\n    return this.animate(element, keyframes, options);\n  }\n\n  /**\n   * Scale out: scale(1) → scale(0.95) or custom. Optionally combine with opacity.\n   */\n  scaleOut(\n    element: Element | null | undefined,\n    options: AnimationOptions & { toScale?: number; opacity?: boolean } = {}\n  ): Animation | null {\n    const to = options.toScale ?? 0.95;\n    const withOpacity = options.opacity !== false;\n    const keyframes: Keyframe[] = withOpacity\n      ? [\n          { transform: 'scale(1)', opacity: 1 },\n          { transform: `scale(${to})`, opacity: 0 },\n        ]\n      : [{ transform: 'scale(1)' }, { transform: `scale(${to})` }];\n    return this.animate(element, keyframes, options);\n  }\n\n  /**\n   * Cancel a specific animation (e.g. one you stored from animate() or a preset).\n   */\n  cancel(animation: Animation): void {\n    animation.cancel();\n    this.running.delete(animation);\n  }\n\n  /**\n   * Cancel all animations currently running for this controller.\n   */\n  cancelAll(): void {\n    this.running.forEach((a) => {\n      try {\n        a.cancel();\n      } catch {\n        // ignore\n      }\n    });\n    this.running.clear();\n  }\n}\n\nfunction slideOffset(\n  direction: SlideDirection,\n  isIn: boolean\n): [string, string] {\n  const pct = '100%';\n  switch (direction) {\n    case 'up':\n      return ['0', isIn ? pct : `-${pct}`];\n    case 'down':\n      return ['0', isIn ? `-${pct}` : pct];\n    case 'left':\n      return [isIn ? pct : `-${pct}`, '0'];\n    case 'right':\n      return [isIn ? `-${pct}` : pct, '0'];\n    default:\n      return ['0', isIn ? `-${pct}` : pct];\n  }\n}\n"],"names":["AnimationController","constructor","host","config","this","running","Set","defaultDuration","defaultEasing","defaultFill","addController","hostDisconnected","forEach","a","cancel","clear","animate","element","keyframes","options","duration","easing","fill","opts","delay","iterations","direction","endDelay","id","animation","add","finished","then","delete","catch","fadeIn","opacity","fadeOut","slideIn","dir","fromX","fromY","slideOffset","transform","slideOut","toX","toY","scaleIn","from","fromScale","scaleOut","to","toScale","cancelAll","isIn","pct"],"mappings":"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"}
+{"version":3,"file":"animation-controller.js","sources":["../../../src/helper/controllers/animation-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\r\n\r\n/** Fill mode for WAAPI (KeyframeEffectOptions). */\r\nexport type FillMode = 'none' | 'forwards' | 'backwards' | 'both';\r\n\r\n/** Playback direction for WAAPI (KeyframeEffectOptions). */\r\nexport type AnimationDirection =\r\n  'normal' | 'reverse' | 'alternate' | 'alternate-reverse';\r\n\r\n/**\r\n * Options for a single animation run (Web Animations API).\r\n * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options\r\n */\r\nexport interface AnimationOptions {\r\n  /** Duration in milliseconds. */\r\n  duration?: number;\r\n  /** Delay before start in milliseconds. */\r\n  delay?: number;\r\n  /** Easing function (CSS easing or cubic-bezier). */\r\n  easing?: string;\r\n  /** Fill mode: 'none' | 'forwards' | 'backwards' | 'both'. */\r\n  fill?: FillMode;\r\n  /** Number of iterations (default 1). */\r\n  iterations?: number;\r\n  /** Playback direction. */\r\n  direction?: AnimationDirection;\r\n  /** End delay in milliseconds. */\r\n  endDelay?: number;\r\n  /** Unique id for the animation (useful for canceling by id). */\r\n  id?: string;\r\n}\r\n\r\n/**\r\n * Keyframes format accepted by Element.animate().\r\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats\r\n */\r\nexport type AnimationKeyframes = Keyframe[] | PropertyIndexedKeyframes;\r\n\r\n/**\r\n * Configuration for the controller defaults (used when not overridden per call).\r\n */\r\nexport interface AnimationControllerConfig {\r\n  defaultDuration?: number;\r\n  defaultEasing?: string;\r\n  defaultFill?: FillMode;\r\n}\r\n\r\n/** Direction for slide presets. */\r\nexport type SlideDirection = 'up' | 'down' | 'left' | 'right';\r\n\r\n/**\r\n * AnimationController – consistent animations via the Web Animations API (WAAPI).\r\n *\r\n * Use as a Lit ReactiveController so components get:\r\n * - Shared defaults (duration, easing, fill)\r\n * - Preset helpers: fadeIn, fadeOut, slideIn, slideOut, scaleIn, scaleOut\r\n * - Low-level animate() for custom keyframes\r\n * - Automatic cancellation of running animations when the host disconnects\r\n *\r\n * @example\r\n * ```ts\r\n * class MyPanel extends LitElement {\r\n *   animation = new AnimationController(this, { defaultDuration: 200, defaultEasing: 'ease-out' });\r\n *\r\n *   async open() {\r\n *     await this.animation.fadeIn(this.panelEl);\r\n *   }\r\n *\r\n *   async close() {\r\n *     await this.animation.fadeOut(this.panelEl);\r\n *   }\r\n * }\r\n * ```\r\n */\r\nexport class AnimationController implements ReactiveController {\r\n  readonly host: ReactiveControllerHost;\r\n  private readonly config: Required<AnimationControllerConfig>;\r\n  private readonly running = new Set<Animation>();\r\n\r\n  constructor(\r\n    host: ReactiveControllerHost,\r\n    config: AnimationControllerConfig = {}\r\n  ) {\r\n    this.host = host;\r\n    this.config = {\r\n      defaultDuration: config.defaultDuration ?? 200,\r\n      defaultEasing: config.defaultEasing ?? 'ease-out',\r\n      defaultFill: config.defaultFill ?? 'forwards',\r\n    };\r\n    host.addController(this);\r\n  }\r\n\r\n  hostDisconnected(): void {\r\n    this.running.forEach((a) => {\r\n      try {\r\n        a.cancel();\r\n      } catch {\r\n        // ignore\r\n      }\r\n    });\r\n    this.running.clear();\r\n  }\r\n\r\n  /**\r\n   * Run a WAAPI animation on an element. Returns the Animation for chaining or await .finished.\r\n   * Running animations are tracked and cancelled when the host disconnects.\r\n   */\r\n  animate(\r\n    element: Element | null | undefined,\r\n    keyframes: AnimationKeyframes,\r\n    options: AnimationOptions = {}\r\n  ): Animation | null {\r\n    if (!element) return null;\r\n\r\n    const duration = options.duration ?? this.config.defaultDuration;\r\n    const easing = options.easing ?? this.config.defaultEasing;\r\n    const fill = options.fill ?? this.config.defaultFill;\r\n\r\n    const opts: KeyframeAnimationOptions = {\r\n      duration,\r\n      delay: options.delay ?? 0,\r\n      easing,\r\n      fill,\r\n      iterations: options.iterations ?? 1,\r\n      direction: options.direction ?? 'normal',\r\n      endDelay: options.endDelay ?? 0,\r\n      id: options.id,\r\n    };\r\n\r\n    const animation = element.animate(keyframes as Keyframe[], opts);\r\n    this.running.add(animation);\r\n    animation.finished\r\n      .then(() => this.running.delete(animation))\r\n      .catch(() => this.running.delete(animation));\r\n    return animation;\r\n  }\r\n\r\n  /**\r\n   * Fade in: opacity 0 → 1.\r\n   */\r\n  fadeIn(\r\n    element: Element | null | undefined,\r\n    options: AnimationOptions = {}\r\n  ): Animation | null {\r\n    return this.animate(element, [{ opacity: 0 }, { opacity: 1 }], options);\r\n  }\r\n\r\n  /**\r\n   * Fade out: opacity 1 → 0.\r\n   */\r\n  fadeOut(\r\n    element: Element | null | undefined,\r\n    options: AnimationOptions = {}\r\n  ): Animation | null {\r\n    return this.animate(element, [{ opacity: 1 }, { opacity: 0 }], options);\r\n  }\r\n\r\n  /**\r\n   * Slide in from the given direction (translate from off-screen to 0).\r\n   */\r\n  slideIn(\r\n    element: Element | null | undefined,\r\n    options: AnimationOptions & { direction?: SlideDirection } = {}\r\n  ): Animation | null {\r\n    const dir = options.direction ?? 'down';\r\n    const [fromX, fromY] = slideOffset(dir, true);\r\n    const keyframes: Keyframe[] = [\r\n      { transform: `translate(${fromX}, ${fromY})` },\r\n      { transform: 'translate(0, 0)' },\r\n    ];\r\n    return this.animate(element, keyframes, options);\r\n  }\r\n\r\n  /**\r\n   * Slide out toward the given direction (translate from 0 to off-screen).\r\n   */\r\n  slideOut(\r\n    element: Element | null | undefined,\r\n    options: AnimationOptions & { direction?: SlideDirection } = {}\r\n  ): Animation | null {\r\n    const dir = options.direction ?? 'up';\r\n    const [toX, toY] = slideOffset(dir, false);\r\n    const keyframes: Keyframe[] = [\r\n      { transform: 'translate(0, 0)' },\r\n      { transform: `translate(${toX}, ${toY})` },\r\n    ];\r\n    return this.animate(element, keyframes, options);\r\n  }\r\n\r\n  /**\r\n   * Scale in: scale(0) or scale(0.9) → scale(1). Optionally combine with opacity.\r\n   */\r\n  scaleIn(\r\n    element: Element | null | undefined,\r\n    options: AnimationOptions & { fromScale?: number; opacity?: boolean } = {}\r\n  ): Animation | null {\r\n    const from = options.fromScale ?? 0.95;\r\n    const withOpacity = options.opacity !== false;\r\n    const keyframes: Keyframe[] = withOpacity\r\n      ? [\r\n          { transform: `scale(${from})`, opacity: 0 },\r\n          { transform: 'scale(1)', opacity: 1 },\r\n        ]\r\n      : [{ transform: `scale(${from})` }, { transform: 'scale(1)' }];\r\n    return this.animate(element, keyframes, options);\r\n  }\r\n\r\n  /**\r\n   * Scale out: scale(1) → scale(0.95) or custom. Optionally combine with opacity.\r\n   */\r\n  scaleOut(\r\n    element: Element | null | undefined,\r\n    options: AnimationOptions & { toScale?: number; opacity?: boolean } = {}\r\n  ): Animation | null {\r\n    const to = options.toScale ?? 0.95;\r\n    const withOpacity = options.opacity !== false;\r\n    const keyframes: Keyframe[] = withOpacity\r\n      ? [\r\n          { transform: 'scale(1)', opacity: 1 },\r\n          { transform: `scale(${to})`, opacity: 0 },\r\n        ]\r\n      : [{ transform: 'scale(1)' }, { transform: `scale(${to})` }];\r\n    return this.animate(element, keyframes, options);\r\n  }\r\n\r\n  /**\r\n   * Cancel a specific animation (e.g. one you stored from animate() or a preset).\r\n   */\r\n  cancel(animation: Animation): void {\r\n    animation.cancel();\r\n    this.running.delete(animation);\r\n  }\r\n\r\n  /**\r\n   * Cancel all animations currently running for this controller.\r\n   */\r\n  cancelAll(): void {\r\n    this.running.forEach((a) => {\r\n      try {\r\n        a.cancel();\r\n      } catch {\r\n        // ignore\r\n      }\r\n    });\r\n    this.running.clear();\r\n  }\r\n}\r\n\r\nfunction slideOffset(\r\n  direction: SlideDirection,\r\n  isIn: boolean\r\n): [string, string] {\r\n  const pct = '100%';\r\n  switch (direction) {\r\n    case 'up':\r\n      return ['0', isIn ? pct : `-${pct}`];\r\n    case 'down':\r\n      return ['0', isIn ? `-${pct}` : pct];\r\n    case 'left':\r\n      return [isIn ? pct : `-${pct}`, '0'];\r\n    case 'right':\r\n      return [isIn ? `-${pct}` : pct, '0'];\r\n    default:\r\n      return ['0', isIn ? `-${pct}` : pct];\r\n  }\r\n}\r\n"],"names":["AnimationController","constructor","host","config","this","running","Set","defaultDuration","defaultEasing","defaultFill","addController","hostDisconnected","forEach","a","cancel","clear","animate","element","keyframes","options","duration","easing","fill","opts","delay","iterations","direction","endDelay","id","animation","add","finished","then","delete","catch","fadeIn","opacity","fadeOut","slideIn","dir","fromX","fromY","slideOffset","transform","slideOut","toX","toY","scaleIn","from","fromScale","scaleOut","to","toScale","cancelAll","isIn","pct"],"mappings":"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"}

package/dist/helper/controllers/popover-controller.d.ts

@@ -125,6 +125,10 @@ export declare class PopoverController implements ReactiveController {
     toggle(): void;
     openPopover(): void;
     private onDocumentPointerDown;
+    /** True when `el` is this host or a descendant of this host / popover. */
+    private isOwnedByThisPopover;
+    /** Other top-layer popover owned by a nested component of this menu. */
+    private isNestedOwnedPopover;
     closePopover(reason?: CloseReason): Promise<void>;
     private normalizeFlipOrder;
     private defaultOrderFromPlacement;
@@ -149,6 +153,8 @@ export declare class PopoverController implements ReactiveController {
     private onViewportMove;
     private onKeydown;
     private onGroupOpen;
+    /** True when `node` is `ancestor` or inside it, including open shadow roots. */
+    private containsAcrossShadow;
     private captureFocusBeforeOpen;
     private elementIsTriggerRelated;
     private restoreFocus;

package/dist/helper/controllers/popover-controller.js

@@ -1,2 +1,2 @@
-class e{constructor(t,i){this._open=!1,this.raf=0,this.boundScrollParents=[],this._listenersAttached=!1,this.lastCloseReason="toggle",this.lastFocusedEl=null,this.hasEverOpened=!1,this._skipNextReposition=!1,this.lastMeta={place:"bottom",arrowAlign:"center"},this._phase="idle",this.onToggle=e=>{if("light-dismiss"===this.lastCloseReason)return void(this.lastCloseReason="toggle");const t=this.opts.getPopover(),i=e;let s=null;if("string"==typeof i?.newState&&(s="open"===i.newState),null===s&&t&&(s=t.matches?.(":popover-open")??!1),null!==s){if(!s)return this._open=!1,this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:this.lastCloseReason}),void(this.opts.getRestoreFocusOnClose()&&this.restoreFocus());this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"toggle"}),this.position(),this.raf=requestAnimationFrame(()=>this.opts.focusOnOpen?.())}},this.onDocumentPointerDown=e=>{if(!this._open)return;if(!this.opts.getCloseOnOutside())return;const t=this.opts.getPopover(),i=this.opts.getAnchor();if(!t||!i)return;if("number"==typeof e.button&&0!==e.button)return;const s=e.composedPath?.()??[],r=s.includes(t),n=s.includes(i);if(r||n)return;for(const e of s){if(!(e instanceof Element))continue;if("function"==typeof e.matches&&e.matches(":popover-open"))return;const i=e.closest?.(":popover-open");if(i&&i!==t)return}const o=e.clientX,a=e.clientY;if(o>=window.innerWidth||a>=window.innerHeight)return;const c=this.opts.getIgnoreOutsideAttr(),l=(this.opts.getIgnoreOutsideSelector()||"").trim();for(const e of s)if(e instanceof HTMLElement){if(c&&e.hasAttribute(c))return;if(l){if(e.matches(l))return;if(e.closest(l))return}}this.closePopover("light-dismiss")},this.onViewportMove=()=>{this._open&&this.position()},this.onKeydown=e=>{if(!this._open)return;if("Escape"!==e.key)return;if(!this.opts.getCloseOnEscape())return;const t=this.opts.getPopover(),i=this.opts.getAnchor(),s=document.activeElement,r=!!(t&&s&&t.contains(s)),n=!!(i&&s&&i.contains(s));(r||n)&&(e.preventDefault(),e.stopPropagation(),this.closePopover("escape"))},this.onGroupOpen=e=>{const t=e.detail?.id;t!==(this.opts.groupId??this.host)&&this._open&&this.closePopover("group")},this.host=t,t.addController(this);const s=i.duration??220,r=i.closeDuration??Math.min(180,s);this.opts={getAnchor:i.getAnchor,getPopover:i.getPopover,getPlacement:e.createGetter(i.getPlacement,i.placement,"auto"),getAlign:e.createGetter(i.getAlign,i.align,"start"),getGap:e.createGetter(i.getGap,i.gap,6),getPadding:e.createGetter(i.getPadding,i.padding,8),getMatchAnchorWidth:e.createGetter(i.getMatchAnchorWidth,i.matchAnchorWidth,!0),getMaxWidthToViewport:e.createGetter(i.getMaxWidthToViewport,i.maxWidthToViewport,!0),getMaxWidthMode:e.createGetter(i.getMaxWidthMode,i.maxWidthMode,"cap"),getFlip:e.createGetter(i.getFlip,i.flip,!0),getFlipOrder:e.createGetter(i.getFlipOrder,i.flipOrder,[]),getPreset:e.createGetter(i.getPreset,i.preset,"slide"),getDuration:e.createGetter(i.getDuration,i.duration,s),getCloseDuration:e.createGetter(i.getCloseDuration,i.closeDuration,r),getAnimateReposition:e.createGetter(i.getAnimateReposition,i.animateReposition,!0),getRepositionMs:e.createGetter(i.getRepositionMs,i.repositionMs,160),getCloseOnEscape:e.createGetter(i.getCloseOnEscape,i.closeOnEscape,!0),getCloseOnOutside:e.createGetter(i.getCloseOnOutside,i.closeOnOutside,!1),getIgnoreOutsideSelector:e.createGetter(i.getIgnoreOutsideSelector,i.ignoreOutsideSelector,""),getIgnoreOutsideAttr:e.createGetter(i.getIgnoreOutsideAttr,i.ignoreOutsideAttr,"data-popover-ignore-outside"),getRestoreFocusOnClose:e.createGetter(i.getRestoreFocusOnClose,i.restoreFocusOnClose,!0),cssVarLeft:i.cssVarLeft??"--sky-pop-left",cssVarTop:i.cssVarTop??"--sky-pop-top",cssVarWidth:i.cssVarWidth??"--sky-pop-width",focusOnOpen:i.focusOnOpen,scrollContainer:i.scrollContainer??"auto",groupEventName:i.groupEventName,groupId:i.groupId,onOpenChange:i.onOpenChange,getFocusTarget:i.getFocusTarget,sideAttr:i.sideAttr??"data-side",respectReducedMotion:i.respectReducedMotion??!0}}static createGetter(e,t,i){return e||(()=>t??i)}get open(){return this._open}get meta(){return this.lastMeta}hostConnected(){"undefined"!=typeof window&&(this.visualViewport=window.visualViewport??void 0)}hostDisconnected(){this.detachGlobalListenersIfAttached(),this.raf&&cancelAnimationFrame(this.raf)}attachGlobalListeners(){"undefined"==typeof window||this._listenersAttached||(this._listenersAttached=!0,this.visualViewport&&(this.visualViewport.addEventListener("resize",this.onViewportMove,{passive:!0}),this.visualViewport.addEventListener("scroll",this.onViewportMove,{passive:!0})),window.addEventListener("resize",this.onViewportMove,{passive:!0}),window.addEventListener("scroll",this.onViewportMove,{passive:!0,capture:!0}),this.opts.groupEventName&&window.addEventListener(this.opts.groupEventName,this.onGroupOpen),this.opts.getCloseOnEscape()&&window.addEventListener("keydown",this.onKeydown,!0),document.addEventListener("pointerdown",this.onDocumentPointerDown,!0),this.setupObserversAndScrollParents())}detachGlobalListenersIfAttached(){this._listenersAttached&&(this._listenersAttached=!1,"undefined"!=typeof window&&(window.removeEventListener("resize",this.onViewportMove),window.removeEventListener("scroll",this.onViewportMove,!0),this.visualViewport&&(this.visualViewport.removeEventListener("resize",this.onViewportMove),this.visualViewport.removeEventListener("scroll",this.onViewportMove)),this.opts.groupEventName&&window.removeEventListener(this.opts.groupEventName,this.onGroupOpen),window.removeEventListener("keydown",this.onKeydown,!0)),document.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.teardownScrollParents(),this.anchorRO?.disconnect(),this.anchorRO=void 0,this.popoverRO?.disconnect(),this.popoverRO=void 0)}refreshTargets(){this._listenersAttached&&this.setupObserversAndScrollParents(),this._open&&this.position()}toggle(){this._open?this.closePopover("api"):this.openPopover()}openPopover(){this.raf&&cancelAnimationFrame(this.raf),this.raf=0;const e=this.opts.getPopover();if(!e)return;"undefined"!=typeof window&&this.opts.groupEventName&&window.dispatchEvent(new CustomEvent(this.opts.groupEventName,{detail:{id:this.opts.groupId??this.host}})),this.captureFocusBeforeOpen(),this.ensurePopoverMarginZero(),this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"api"});const t=e.style.visibility;e.style.visibility="hidden",e.showPopover?.();const i=this.hasEverOpened;this.hasEverOpened=!0,this._skipNextReposition=!i,this.position(),e.getBoundingClientRect();const s=this.lastMeta.place;this.setSideAttr(s),this.raf=requestAnimationFrame(()=>{e.style.visibility=t||"visible",this.playPreset(e,s,"open").then(()=>this.opts.focusOnOpen?.())})}async closePopover(e="api"){const t=this.opts.getPopover();if(!t)return;if(this.lastCloseReason=e,!this._open)return void t.hidePopover?.();this._open=!1,this.opts.getRestoreFocusOnClose()&&this.restoreFocus(),this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:e});const i=this.lastMeta.place;this.setSideAttr(i),this.raf&&cancelAnimationFrame(this.raf),this.raf=0,this.moveAnim?.cancel(),await this.playPreset(t,i,"close"),t.hidePopover?.()}normalizeFlipOrder(e){const t=["bottom","top","right","left"];if(!e||!e.length)return t;const i=new Set(["top","bottom","left","right"]),s=[];for(const t of e)i.has(t)&&!s.includes(t)&&s.push(t);for(const e of t)s.includes(e)||s.push(e);return s}defaultOrderFromPlacement(e){switch(e){case"top":return["top","bottom","right","left"];case"bottom":default:return["bottom","top","right","left"];case"left":return["left","right","bottom","top"];case"right":return["right","left","bottom","top"]}}position(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();if(!e||!t)return;this.ensurePopoverMarginZero();const i=t.matches?.(":popover-open")&&null!==t.offsetParent,s=this._open&&i?t.getBoundingClientRect():null,r=this.opts.getPadding(),n=this.opts.getGap(),o=e.getBoundingClientRect(),a=window.visualViewport??null,c=a?.width??window.innerWidth,l=a?.height??window.innerHeight,p=a?.offsetLeft??0,h=a?.offsetTop??0;if(this.opts.getMaxWidthToViewport()){const e=Math.max(0,c-2*r);t.style.maxWidth=`${e}px`,t.style.boxSizing="border-box"}const x=t.getBoundingClientRect(),u=x.width||220,d=x.height||50,g={top:o.top-n-h,bottom:l-(o.bottom-h)-n,left:o.left-n-p,right:c-(o.right-p)-n},f=e=>"top"===e?g.top>=d:"bottom"===e?g.bottom>=d:"left"===e?g.left>=u:g.right>=u,P=this.opts.getPlacement(),b=this.opts.getFlip(),v=this.opts.getFlipOrder()?.length?this.normalizeFlipOrder(this.opts.getFlipOrder()):this.normalizeFlipOrder(this.defaultOrderFromPlacement(P));let m;if("auto"===P){m=v.find(f)??v.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else if(b){const e=P,t=v.includes(e)?[e,...v.filter(t=>t!==e)]:[e,...v];m=t.find(f)??t.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else m=P;let $=0,y=0,O="center";const D="rtl"===getComputedStyle(e).direction;let S=this.opts.getAlign();D&&("start"===S?S="end":"end"===S&&(S="start"));const k=o.left-p,w=o.right-p,C=o.top-h,A=o.bottom-h,z=o.width,M=o.height;if("top"===m||"bottom"===m){y="start"===S?k:"end"===S?w-u:k+z/2-u/2,$="top"===m?C-d-n:A+n;const e=Math.max(r,Math.min(c-u-r,y));e!==y&&(O=e<=r+.5?"start":"end"),y=e,$=Math.max(r,Math.min(l-d-r,$))}else{y="left"===m?k-u-n:w+n,$=C+M/2-d/2;const e=Math.max(r,Math.min(l-d-r,$));e!==$&&(O=e<=r+.5?"start":"end"),$=e,y=Math.max(r,Math.min(c-u-r,y))}y+=p,$+=h;const I=this.host;if(this.opts.getMatchAnchorWidth()){const e=Math.max(0,c-2*r),t=Math.min(o.width,e);I.style.setProperty(this.opts.cssVarWidth,`${t}px`)}else I.style.removeProperty(this.opts.cssVarWidth);if(I.style.setProperty(this.opts.cssVarLeft,`${y}px`),I.style.setProperty(this.opts.cssVarTop,`${$}px`),t.style.setProperty(this.opts.cssVarLeft,`${y}px`),t.style.setProperty(this.opts.cssVarTop,`${$}px`),this.opts.getMatchAnchorWidth()){const e=I.style.getPropertyValue(this.opts.cssVarWidth);e&&t.style.setProperty(this.opts.cssVarWidth,e)}else t.style.removeProperty(this.opts.cssVarWidth);this.lastMeta.place,this.lastMeta={place:m,arrowAlign:O},this.setSideAttr(m);this._open&&this.opts.getAnimateReposition()&&s&&!this._skipNextReposition&&t.matches?.(":popover-open")&&i&&"open"===this._phase&&!this.presetAnim&&(this.raf&&cancelAnimationFrame(this.raf),this.raf=requestAnimationFrame(()=>{const e=t.getBoundingClientRect();this.animateMove(t,s,e)})),this._skipNextReposition=!1}vec(e,t){return"top"===e?{x:0,y:+t}:"bottom"===e?{x:0,y:-t}:"left"===e?{x:+t,y:0}:{x:-t,y:0}}prefersReducedMotion(){return!!this.opts.respectReducedMotion&&("undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches)}computeOrigin(e,t){return"center"===t?"50% 50%":"top"===e?"50% 100%":"bottom"===e?"50% 0%":"left"===e?"100% 50%":"0% 50%"}kf(e,t,i){const s={opacity:e,transform:t};return i&&(s.filter=i),s}presetRegistry(){return{none:{name:"none",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180},getKeyframes:()=>[{opacity:1}]},fade:{name:"fade",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.4, 0, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 0.2, 1)",enterDuration:180,exitDuration:150},getKeyframes:({phase:e})=>"open"===e?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}]},scale:{name:"scale",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.36, 0, 0.66, -0.56)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},slide:{name:"slide",defaults:{enterPx:12,exitPx:8,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0)`)]}},iosMenu:{name:"iosMenu",defaults:{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},iosSheet:{name:"iosSheet",defaults:{enterPx:16,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},materialMenu:{name:"materialMenu",defaults:{enterPx:10,exitPx:6,enterScale:.96,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.2, 0, 0, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},materialSheet:{name:"materialSheet",defaults:{enterPx:18,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.05, 0.7, 0.1, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},floaty:{name:"floaty",defaults:{enterPx:14,exitPx:10,enterScale:.985,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},soft:{name:"soft",defaults:{enterPx:10,exitPx:8,enterScale:.97,exitScale:.98,blurInPx:4,blurOutPx:2,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.33, 1, 0.68, 1)",easingClose:"cubic-bezier(0.32, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},sharp:{name:"sharp",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.12, 0.9, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},blurIn:{name:"blurIn",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:12,blurOutPx:8,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,"translate3d(0,0,0)",`blur(${t.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,"translate3d(0,0,0)",`blur(${t.blurOutPx}px)`)]},blurFade:{name:"blurFade",defaults:{enterPx:10,exitPx:8,enterScale:.99,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.45, 0, 0.55, 1)",easingClose:"cubic-bezier(0.3, 0, 0.7, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`,`blur(${i.blurOutPx}px)`)]}},zoomFromAnchor:{name:"zoomFromAnchor",defaults:{enterPx:6,exitPx:4,enterScale:.92,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},zoomFromCorner:{name:"zoomFromCorner",defaults:{enterPx:0,exitPx:0,enterScale:.88,exitScale:.94,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},flip3d:{name:"flip3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:14,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i,origin:s})=>{const r=this.vec(t,i.enterPx),n="left"===t||"right"===t?"Y":"X",o="top"===t||"left"===t?1:-1,a=i.rotateDeg*o;if("open"===e)return[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${r.x}px, ${r.y}px, 0) rotate${n}(${a}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`)];const c=this.vec(t,i.exitPx);return[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${c.x}px, ${c.y}px, 0) rotate${n}(${.7*a}deg) scale(${i.exitScale})`)]}},card3d:{name:"card3d",defaults:{enterPx:10,exitPx:8,enterScale:.96,exitScale:.98,blurInPx:6,blurOutPx:3,perspectivePx:1e3,rotateDeg:10,tiltDeg:10,origin:"anchor",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="left"===t||"right"===t?"Y":"X",n="top"===t||"left"===t?1:-1,o=i.tiltDeg*n;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotate${r}(${o}deg) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotate${r}(${.7*o}deg) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},tilt3d:{name:"tilt3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:12,origin:"corner",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t?i.tiltDeg:"bottom"===t?-i.tiltDeg:0,n="left"===t?i.tiltDeg:"right"===t?-i.tiltDeg:0;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateX(${r}deg) rotateY(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateX(${.6*r}deg) rotateY(${.6*n}deg) scale(${i.exitScale})`)]}},depth3d:{name:"depth3d",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.94,blurInPx:8,blurOutPx:5,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-40px) scale(${t.enterScale})`,`blur(${t.blurInPx}px)`),this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-30px) scale(${t.exitScale})`,`blur(${t.blurOutPx}px)`)]},rotate3d:{name:"rotate3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:12,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t||"left"===t?1:-1,n=i.rotateDeg*r;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateZ(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateZ(${.7*n}deg) scale(${i.exitScale})`)]}},springy:{name:"springy",defaults:{enterPx:12,exitPx:8,enterScale:.94,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.02)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},bouncy:{name:"bouncy",defaults:{enterPx:14,exitPx:10,enterScale:.9,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.03)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},glide:{name:"glide",defaults:{enterPx:18,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.08, 0.82, 0.17, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:200},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},pop:{name:"pop",defaults:{enterPx:0,exitPx:0,enterScale:.85,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1.03)"),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},drop:{name:"drop",defaults:{enterPx:22,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1)",easingClose:"cubic-bezier(0.45, 0, 0.55, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},grow:{name:"grow",defaults:{enterPx:6,exitPx:4,enterScale:.95,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}}}}getPresetKeyframes(e,t,i,s){const r=this.presetRegistry(),n=r[e]??r.iosMenu;this.getBaseDefaults();const o={...n.defaults,...s??{}},a=this.computeOrigin(t,o.origin);return{keyframes:n.getKeyframes({side:t,phase:i,cfg:o,origin:a}),cfg:o,origin:a}}getBaseDefaults(){return{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180}}async playPreset(e,t,i){if(this.checkForConflictingCSS(e),this.prefersReducedMotion())return;const s=this.opts.getPreset();if("none"===s)return;this.moveAnim?.cancel(),this.presetAnim?.cancel(),this._phase="open"===i?"opening":"closing",e.style.transition="none";const{keyframes:r,cfg:n,origin:o}=this.getPresetKeyframes(s,t,i),a="open"===i?n.enterDuration:n.exitDuration,c=this.is3dPreset(s);c?(e.style.transformStyle="preserve-3d",e.style.backfaceVisibility="hidden"):(e.style.transformStyle="",e.style.backfaceVisibility=""),e.style.transformOrigin=o;const l="open"===i?n.easingOpen:n.easingClose,p=e.animate(r,{duration:a,easing:l,fill:"both"});this.presetAnim=p;try{await p.finished}catch{}finally{this.presetAnim===p&&(this.presetAnim=void 0),e.style.transition="",c&&(e.style.transformStyle="",e.style.backfaceVisibility=""),this._phase="open"===i?"open":"idle"}}checkForConflictingCSS(e){const t=e.style.transition||"";t.includes("transform")&&t.includes("opacity")&&console.warn("Warning: Using 3D animation (WAAPI) alongside CSS transitions on 'transform' or 'opacity' can cause conflicts. Consider removing CSS transitions on these properties."),(t.includes("margin")||t.includes("padding"))&&console.warn("Warning: Animating 'margin' or 'padding' alongside 3D animation (WAAPI) may cause visual glitches. Please avoid transitioning these properties during WAAPI animations.")}animateMove(e,t,i){if("open"!==this._phase)return;const s=t.left-i.left,r=t.top-i.top;if(Math.abs(s)<.5&&Math.abs(r)<.5)return;this.moveAnim?.cancel();const n=this.opts.getRepositionMs(),o=e.animate([{transform:`translate3d(${s}px, ${r}px, 0)`},{transform:"translate3d(0, 0, 0)"}],{duration:n,easing:"cubic-bezier(0.16, 1, 0.3, 1)",fill:"both"});this.moveAnim=o,o.finished.finally(()=>{this.moveAnim===o&&(this.moveAnim=void 0)})}is3dPreset(e){return"flip3d"===e||"card3d"===e||"tilt3d"===e||"depth3d"===e||"rotate3d"===e}setSideAttr(e){const t=this.opts.getPopover();t&&t.setAttribute(this.opts.sideAttr,e)}setupObserversAndScrollParents(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();e&&"ResizeObserver"in window&&(this.anchorRO?.disconnect(),this.anchorRO=new ResizeObserver(()=>{this._open&&this.position()}),this.anchorRO.observe(e)),t&&"ResizeObserver"in window&&(this.popoverRO?.disconnect(),this.popoverRO=new ResizeObserver(()=>{this._open&&this.position()}),this.popoverRO.observe(t)),this.teardownScrollParents();const i=this.opts.scrollContainer;if("window"!==i)if(i instanceof HTMLElement)this.bindScroll(i);else if(e)for(const t of this.getScrollParents(e))this.bindScroll(t)}bindScroll(e){const t=this.onViewportMove;e.addEventListener("scroll",t,{passive:!0}),this.boundScrollParents.push({el:e,fn:t})}teardownScrollParents(){for(const{el:e,fn:t}of this.boundScrollParents)e.removeEventListener?.("scroll",t);this.boundScrollParents=[]}getScrollParents(e){const t=[];let i=e.parentElement;for(;i&&i!==document.body;){const e=getComputedStyle(i),s=e.overflowY,r=e.overflowX,n=("auto"===s||"scroll"===s||"overlay"===s)&&i.scrollHeight>i.clientHeight,o=("auto"===r||"scroll"===r||"overlay"===r)&&i.scrollWidth>i.clientWidth;(n||o)&&t.push(i),i=i.parentElement}return t}captureFocusBeforeOpen(){this.lastFocusedEl=document.activeElement}elementIsTriggerRelated(e){if(!(e instanceof HTMLElement))return!1;const t=this.opts.getAnchor(),i=this.opts.getFocusTarget?.()??null;return!(!i||e!==i&&!i.contains(e))||!!t&&(!(e!==t&&!t.contains(e))||!!t.shadowRoot?.contains(e))}restoreFocus(){if(!this.opts.getRestoreFocusOnClose())return;const e=this.opts.getAnchor();if(!e)return;const t=this.opts.getFocusTarget?.()??e,i=document.activeElement,s=this.lastFocusedEl,r=this.opts.getPopover(),n=!!(r&&s&&r.contains(s)),o=this.elementIsTriggerRelated(s);(!!(r&&i&&r.contains(i))||n||o)&&t.focus?.({preventScroll:!0})}ensurePopoverMarginZero(){const e=this.opts.getPopover();e&&(e.style.margin||(e.style.margin="0"))}updateOption(e,t){this.opts[e]="function"==typeof t?t:()=>t,this._open&&e.startsWith("get")&&this.position()}}export{e as PopoverController};
+class e{constructor(t,i){this._open=!1,this.raf=0,this.boundScrollParents=[],this._listenersAttached=!1,this.lastCloseReason="toggle",this.lastFocusedEl=null,this.hasEverOpened=!1,this._skipNextReposition=!1,this.lastMeta={place:"bottom",arrowAlign:"center"},this._phase="idle",this.onToggle=e=>{if("light-dismiss"===this.lastCloseReason)return void(this.lastCloseReason="toggle");const t=this.opts.getPopover(),i=e;let s=null;if("string"==typeof i?.newState&&(s="open"===i.newState),null===s&&t&&(s=t.matches?.(":popover-open")??!1),null!==s){if(!s)return this._open=!1,this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:this.lastCloseReason}),void(this.opts.getRestoreFocusOnClose()&&this.restoreFocus());this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"toggle"}),this.position(),this.raf=requestAnimationFrame(()=>this.opts.focusOnOpen?.())}},this.onDocumentPointerDown=e=>{if(!this._open)return;if(!this.opts.getCloseOnOutside())return;const t=this.opts.getPopover(),i=this.opts.getAnchor();if(!t||!i)return;if("number"==typeof e.button&&0!==e.button)return;const s=e.composedPath?.()??[],r=s.includes(t),n=s.includes(i);if(r||n)return;for(const e of s)if(e instanceof Element&&this.isNestedOwnedPopover(e,t))return;const o=e.clientX,a=e.clientY;if(o>=window.innerWidth||a>=window.innerHeight)return;const c=this.opts.getIgnoreOutsideAttr(),l=(this.opts.getIgnoreOutsideSelector()||"").trim();for(const e of s)if(e instanceof HTMLElement){if(c&&e.hasAttribute(c)&&this.isOwnedByThisPopover(e,t))return;if(l){const i=e.matches(l)?e:e.closest(l);if(i&&this.isOwnedByThisPopover(i,t))return}}this.closePopover("light-dismiss")},this.onViewportMove=()=>{this._open&&this.position()},this.onKeydown=e=>{if(!this._open)return;if("Escape"!==e.key)return;if(!this.opts.getCloseOnEscape())return;const t=this.opts.getPopover(),i=this.opts.getAnchor(),s=document.activeElement,r=!!(t&&s&&t.contains(s)),n=!!(i&&s&&i.contains(s));(r||n)&&(e.preventDefault(),e.stopPropagation(),this.closePopover("escape"))},this.onGroupOpen=e=>{const t=e.detail?.id;t!==(this.opts.groupId??this.host)&&this._open&&(t instanceof Node&&this.host instanceof Node&&(this.containsAcrossShadow(this.host,t)||this.containsAcrossShadow(t,this.host))||this.closePopover("group"))},this.host=t,t.addController(this);const s=i.duration??220,r=i.closeDuration??Math.min(180,s);this.opts={getAnchor:i.getAnchor,getPopover:i.getPopover,getPlacement:e.createGetter(i.getPlacement,i.placement,"auto"),getAlign:e.createGetter(i.getAlign,i.align,"start"),getGap:e.createGetter(i.getGap,i.gap,6),getPadding:e.createGetter(i.getPadding,i.padding,8),getMatchAnchorWidth:e.createGetter(i.getMatchAnchorWidth,i.matchAnchorWidth,!0),getMaxWidthToViewport:e.createGetter(i.getMaxWidthToViewport,i.maxWidthToViewport,!0),getMaxWidthMode:e.createGetter(i.getMaxWidthMode,i.maxWidthMode,"cap"),getFlip:e.createGetter(i.getFlip,i.flip,!0),getFlipOrder:e.createGetter(i.getFlipOrder,i.flipOrder,[]),getPreset:e.createGetter(i.getPreset,i.preset,"slide"),getDuration:e.createGetter(i.getDuration,i.duration,s),getCloseDuration:e.createGetter(i.getCloseDuration,i.closeDuration,r),getAnimateReposition:e.createGetter(i.getAnimateReposition,i.animateReposition,!0),getRepositionMs:e.createGetter(i.getRepositionMs,i.repositionMs,160),getCloseOnEscape:e.createGetter(i.getCloseOnEscape,i.closeOnEscape,!0),getCloseOnOutside:e.createGetter(i.getCloseOnOutside,i.closeOnOutside,!1),getIgnoreOutsideSelector:e.createGetter(i.getIgnoreOutsideSelector,i.ignoreOutsideSelector,""),getIgnoreOutsideAttr:e.createGetter(i.getIgnoreOutsideAttr,i.ignoreOutsideAttr,"data-popover-ignore-outside"),getRestoreFocusOnClose:e.createGetter(i.getRestoreFocusOnClose,i.restoreFocusOnClose,!0),cssVarLeft:i.cssVarLeft??"--sky-pop-left",cssVarTop:i.cssVarTop??"--sky-pop-top",cssVarWidth:i.cssVarWidth??"--sky-pop-width",focusOnOpen:i.focusOnOpen,scrollContainer:i.scrollContainer??"auto",groupEventName:i.groupEventName,groupId:i.groupId,onOpenChange:i.onOpenChange,getFocusTarget:i.getFocusTarget,sideAttr:i.sideAttr??"data-side",respectReducedMotion:i.respectReducedMotion??!0}}static createGetter(e,t,i){return e||(()=>t??i)}get open(){return this._open}get meta(){return this.lastMeta}hostConnected(){"undefined"!=typeof window&&(this.visualViewport=window.visualViewport??void 0)}hostDisconnected(){this.detachGlobalListenersIfAttached(),this.raf&&cancelAnimationFrame(this.raf)}attachGlobalListeners(){"undefined"==typeof window||this._listenersAttached||(this._listenersAttached=!0,this.visualViewport&&(this.visualViewport.addEventListener("resize",this.onViewportMove,{passive:!0}),this.visualViewport.addEventListener("scroll",this.onViewportMove,{passive:!0})),window.addEventListener("resize",this.onViewportMove,{passive:!0}),window.addEventListener("scroll",this.onViewportMove,{passive:!0,capture:!0}),this.opts.groupEventName&&window.addEventListener(this.opts.groupEventName,this.onGroupOpen),this.opts.getCloseOnEscape()&&window.addEventListener("keydown",this.onKeydown,!0),document.addEventListener("pointerdown",this.onDocumentPointerDown,!0),this.setupObserversAndScrollParents())}detachGlobalListenersIfAttached(){this._listenersAttached&&(this._listenersAttached=!1,"undefined"!=typeof window&&(window.removeEventListener("resize",this.onViewportMove),window.removeEventListener("scroll",this.onViewportMove,!0),this.visualViewport&&(this.visualViewport.removeEventListener("resize",this.onViewportMove),this.visualViewport.removeEventListener("scroll",this.onViewportMove)),this.opts.groupEventName&&window.removeEventListener(this.opts.groupEventName,this.onGroupOpen),window.removeEventListener("keydown",this.onKeydown,!0)),document.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.teardownScrollParents(),this.anchorRO?.disconnect(),this.anchorRO=void 0,this.popoverRO?.disconnect(),this.popoverRO=void 0)}refreshTargets(){this._listenersAttached&&this.setupObserversAndScrollParents(),this._open&&this.position()}toggle(){this._open?this.closePopover("api"):this.openPopover()}openPopover(){this.raf&&cancelAnimationFrame(this.raf),this.raf=0;const e=this.opts.getPopover();if(!e)return;"undefined"!=typeof window&&this.opts.groupEventName&&window.dispatchEvent(new CustomEvent(this.opts.groupEventName,{detail:{id:this.opts.groupId??this.host}})),this.captureFocusBeforeOpen(),this.ensurePopoverMarginZero(),this._open=!0,this.attachGlobalListeners(),this.opts.onOpenChange?.(!0,{reason:"api"});const t=e.style.visibility;e.style.visibility="hidden",e.showPopover?.();const i=this.hasEverOpened;this.hasEverOpened=!0,this._skipNextReposition=!i,this.position(),e.getBoundingClientRect();const s=this.lastMeta.place;this.setSideAttr(s),this.raf=requestAnimationFrame(()=>{e.style.visibility=t||"visible",this.playPreset(e,s,"open").then(()=>this.opts.focusOnOpen?.())})}isOwnedByThisPopover(e,t){if(!e)return!1;const i=this.host instanceof Element?this.host:null;return!(!i||e!==i&&!i.contains(e))||!!t.contains(e)}isNestedOwnedPopover(e,t){const i=e.matches?.(":popover-open")?e:e.closest?.(":popover-open");if(!i||i===t)return!1;const s=i.getRootNode(),r=s instanceof ShadowRoot?s.host:i.parentElement;return this.isOwnedByThisPopover(r,t)}async closePopover(e="api"){const t=this.opts.getPopover();if(!t)return;if(this.lastCloseReason=e,!this._open)return void t.hidePopover?.();this._open=!1,this.opts.getRestoreFocusOnClose()&&this.restoreFocus(),this.detachGlobalListenersIfAttached(),this.opts.onOpenChange?.(!1,{reason:e});const i=this.lastMeta.place;this.setSideAttr(i),this.raf&&cancelAnimationFrame(this.raf),this.raf=0,this.moveAnim?.cancel(),await this.playPreset(t,i,"close"),t.hidePopover?.()}normalizeFlipOrder(e){const t=["bottom","top","right","left"];if(!e||!e.length)return t;const i=new Set(["top","bottom","left","right"]),s=[];for(const t of e)i.has(t)&&!s.includes(t)&&s.push(t);for(const e of t)s.includes(e)||s.push(e);return s}defaultOrderFromPlacement(e){switch(e){case"top":return["top","bottom","right","left"];case"bottom":default:return["bottom","top","right","left"];case"left":return["left","right","bottom","top"];case"right":return["right","left","bottom","top"]}}position(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();if(!e||!t)return;this.ensurePopoverMarginZero();const i=t.matches?.(":popover-open")&&null!==t.offsetParent,s=this._open&&i?t.getBoundingClientRect():null,r=this.opts.getPadding(),n=this.opts.getGap(),o=e.getBoundingClientRect(),a=window.visualViewport??null,c=a?.width??window.innerWidth,l=a?.height??window.innerHeight,p=a?.offsetLeft??0,h=a?.offsetTop??0;if(this.opts.getMaxWidthToViewport()){const e=Math.max(0,c-2*r);t.style.maxWidth=`${e}px`,t.style.boxSizing="border-box"}const x=t.getBoundingClientRect(),u=x.width||220,d=x.height||50,g={top:o.top-n-h,bottom:l-(o.bottom-h)-n,left:o.left-n-p,right:c-(o.right-p)-n},f=e=>"top"===e?g.top>=d:"bottom"===e?g.bottom>=d:"left"===e?g.left>=u:g.right>=u,P=this.opts.getPlacement(),b=this.opts.getFlip(),v=this.opts.getFlipOrder()?.length?this.normalizeFlipOrder(this.opts.getFlipOrder()):this.normalizeFlipOrder(this.defaultOrderFromPlacement(P));let m;if("auto"===P){m=v.find(f)??v.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else if(b){const e=P,t=v.includes(e)?[e,...v.filter(t=>t!==e)]:[e,...v];m=t.find(f)??t.map(e=>[e,g[e]]).sort((e,t)=>t[1]-e[1])[0][0]}else m=P;let y=0,$=0,O="center";const S="rtl"===getComputedStyle(e).direction;let D=this.opts.getAlign();S&&("start"===D?D="end":"end"===D&&(D="start"));const w=o.left-p,k=o.right-p,A=o.top-h,C=o.bottom-h,z=o.width,M=o.height;if("top"===m||"bottom"===m){$="start"===D?w:"end"===D?k-u:w+z/2-u/2,y="top"===m?A-d-n:C+n;const e=Math.max(r,Math.min(c-u-r,$));e!==$&&(O=e<=r+.5?"start":"end"),$=e,y=Math.max(r,Math.min(l-d-r,y))}else{$="left"===m?w-u-n:k+n,y=A+M/2-d/2;const e=Math.max(r,Math.min(l-d-r,y));e!==y&&(O=e<=r+.5?"start":"end"),y=e,$=Math.max(r,Math.min(c-u-r,$))}$+=p,y+=h;const I=this.host;if(this.opts.getMatchAnchorWidth()){const e=Math.max(0,c-2*r),t=Math.min(o.width,e);I.style.setProperty(this.opts.cssVarWidth,`${t}px`)}else I.style.removeProperty(this.opts.cssVarWidth);if(I.style.setProperty(this.opts.cssVarLeft,`${$}px`),I.style.setProperty(this.opts.cssVarTop,`${y}px`),t.style.setProperty(this.opts.cssVarLeft,`${$}px`),t.style.setProperty(this.opts.cssVarTop,`${y}px`),this.opts.getMatchAnchorWidth()){const e=I.style.getPropertyValue(this.opts.cssVarWidth);e&&t.style.setProperty(this.opts.cssVarWidth,e)}else t.style.removeProperty(this.opts.cssVarWidth);this.lastMeta.place,this.lastMeta={place:m,arrowAlign:O},this.setSideAttr(m);this._open&&this.opts.getAnimateReposition()&&s&&!this._skipNextReposition&&t.matches?.(":popover-open")&&i&&"open"===this._phase&&!this.presetAnim&&(this.raf&&cancelAnimationFrame(this.raf),this.raf=requestAnimationFrame(()=>{const e=t.getBoundingClientRect();this.animateMove(t,s,e)})),this._skipNextReposition=!1}vec(e,t){return"top"===e?{x:0,y:+t}:"bottom"===e?{x:0,y:-t}:"left"===e?{x:+t,y:0}:{x:-t,y:0}}prefersReducedMotion(){return!!this.opts.respectReducedMotion&&("undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches)}computeOrigin(e,t){return"center"===t?"50% 50%":"top"===e?"50% 100%":"bottom"===e?"50% 0%":"left"===e?"100% 50%":"0% 50%"}kf(e,t,i){const s={opacity:e,transform:t};return i&&(s.filter=i),s}presetRegistry(){return{none:{name:"none",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180},getKeyframes:()=>[{opacity:1}]},fade:{name:"fade",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.4, 0, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 0.2, 1)",enterDuration:180,exitDuration:150},getKeyframes:({phase:e})=>"open"===e?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}]},scale:{name:"scale",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.36, 0, 0.66, -0.56)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},slide:{name:"slide",defaults:{enterPx:12,exitPx:8,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0)`)]}},iosMenu:{name:"iosMenu",defaults:{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:250,exitDuration:220},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px, 0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px, 0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},iosSheet:{name:"iosSheet",defaults:{enterPx:16,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:200,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},materialMenu:{name:"materialMenu",defaults:{enterPx:10,exitPx:6,enterScale:.96,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.2, 0, 0, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},materialSheet:{name:"materialSheet",defaults:{enterPx:18,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.05, 0.7, 0.1, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},floaty:{name:"floaty",defaults:{enterPx:14,exitPx:10,enterScale:.985,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},soft:{name:"soft",defaults:{enterPx:10,exitPx:8,enterScale:.97,exitScale:.98,blurInPx:4,blurOutPx:2,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.33, 1, 0.68, 1)",easingClose:"cubic-bezier(0.32, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0) scale(1)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},sharp:{name:"sharp",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.12, 0.9, 0.2, 1)",easingClose:"cubic-bezier(0.4, 0, 1, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},blurIn:{name:"blurIn",defaults:{enterPx:0,exitPx:0,enterScale:1,exitScale:1,blurInPx:12,blurOutPx:8,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,"translate3d(0,0,0)",`blur(${t.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,"translate3d(0,0,0)",`blur(${t.blurOutPx}px)`)]},blurFade:{name:"blurFade",defaults:{enterPx:10,exitPx:8,enterScale:.99,exitScale:.99,blurInPx:10,blurOutPx:6,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.45, 0, 0.55, 1)",easingClose:"cubic-bezier(0.3, 0, 0.7, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`,`blur(${i.blurInPx}px)`),this.kf(1,"translate3d(0,0,0)","blur(0px)")]:[this.kf(1,"translate3d(0,0,0)","blur(0px)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`,`blur(${i.blurOutPx}px)`)]}},zoomFromAnchor:{name:"zoomFromAnchor",defaults:{enterPx:6,exitPx:4,enterScale:.92,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},zoomFromCorner:{name:"zoomFromCorner",defaults:{enterPx:0,exitPx:0,enterScale:.88,exitScale:.94,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"corner",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},flip3d:{name:"flip3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:14,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.5, 0, 0.75, 0)",easingClose:"cubic-bezier(0.33, 0, 0.67, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i,origin:s})=>{const r=this.vec(t,i.enterPx),n="left"===t||"right"===t?"Y":"X",o="top"===t||"left"===t?1:-1,a=i.rotateDeg*o;if("open"===e)return[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${r.x}px, ${r.y}px, 0) rotate${n}(${a}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`)];const c=this.vec(t,i.exitPx);return[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${n}(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${c.x}px, ${c.y}px, 0) rotate${n}(${.7*a}deg) scale(${i.exitScale})`)]}},card3d:{name:"card3d",defaults:{enterPx:10,exitPx:8,enterScale:.96,exitScale:.98,blurInPx:6,blurOutPx:3,perspectivePx:1e3,rotateDeg:10,tiltDeg:10,origin:"anchor",easingOpen:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",easingClose:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="left"===t||"right"===t?"Y":"X",n="top"===t||"left"===t?1:-1,o=i.tiltDeg*n;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotate${r}(${o}deg) scale(${i.enterScale})`,`blur(${i.blurInPx}px)`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotate${r}(0deg) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotate${r}(${.7*o}deg) scale(${i.exitScale})`,`blur(${i.blurOutPx}px)`)]}},tilt3d:{name:"tilt3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:12,origin:"corner",easingOpen:"cubic-bezier(0.23, 1, 0.32, 1)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t?i.tiltDeg:"bottom"===t?-i.tiltDeg:0,n="left"===t?i.tiltDeg:"right"===t?-i.tiltDeg:0;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateX(${r}deg) rotateY(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateX(${.6*r}deg) rotateY(${.6*n}deg) scale(${i.exitScale})`)]}},depth3d:{name:"depth3d",defaults:{enterPx:0,exitPx:0,enterScale:.9,exitScale:.94,blurInPx:8,blurOutPx:5,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.22, 0.61, 0.36, 1)",easingClose:"cubic-bezier(0.55, 0.06, 0.68, 0.19)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-40px) scale(${t.enterScale})`,`blur(${t.blurInPx}px)`),this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)")]:[this.kf(1,`perspective(${t.perspectivePx}px) translate3d(0,0,0) scale(1)`,"blur(0px)"),this.kf(0,`perspective(${t.perspectivePx}px) translate3d(0,0,-30px) scale(${t.exitScale})`,`blur(${t.blurOutPx}px)`)]},rotate3d:{name:"rotate3d",defaults:{enterPx:8,exitPx:6,enterScale:.98,exitScale:.99,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:12,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.36, 0, 0.66, -0.56)",easingClose:"cubic-bezier(0.34, 1.56, 0.64, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r="top"===t||"left"===t?1:-1,n=i.rotateDeg*r;return"open"===e?[this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${s.x}px, ${s.y}px, 0) rotateZ(${n}deg) scale(${i.enterScale})`),this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`)]:[this.kf(1,`perspective(${i.perspectivePx}px) translate3d(0,0,0) rotateZ(0deg) scale(1)`),this.kf(0,`perspective(${i.perspectivePx}px) translate3d(${this.vec(t,i.exitPx).x}px, ${this.vec(t,i.exitPx).y}px, 0) rotateZ(${.7*n}deg) scale(${i.exitScale})`)]}},springy:{name:"springy",defaults:{enterPx:12,exitPx:8,enterScale:.94,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.5, 0, 0.75, 0)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.02)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},bouncy:{name:"bouncy",defaults:{enterPx:14,exitPx:10,enterScale:.9,exitScale:.96,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1.15)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx);if("open"===e)return[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1.03)"),this.kf(1,"translate3d(0,0,0) scale(1)")];const r=this.vec(t,i.exitPx);return[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}},glide:{name:"glide",defaults:{enterPx:18,exitPx:12,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.08, 0.82, 0.17, 1)",easingClose:"cubic-bezier(0.3, 0, 1, 1)",enterDuration:220,exitDuration:200},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},pop:{name:"pop",defaults:{enterPx:0,exitPx:0,enterScale:.85,exitScale:.95,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.18, 0.89, 0.32, 1.28)",easingClose:"cubic-bezier(0.6, -0.28, 0.74, 0.05)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,cfg:t})=>"open"===e?[this.kf(0,`scale(${t.enterScale})`),this.kf(1,"scale(1.03)"),this.kf(1,"scale(1)")]:[this.kf(1,"scale(1)"),this.kf(0,`scale(${t.exitScale})`)]},drop:{name:"drop",defaults:{enterPx:22,exitPx:14,enterScale:1,exitScale:1,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"center",easingOpen:"cubic-bezier(0.12, 0.9, 0.18, 1)",easingClose:"cubic-bezier(0.45, 0, 0.55, 1)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0)`),this.kf(1,"translate3d(0,0,0)")]:[this.kf(1,"translate3d(0,0,0)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0)`)]}},grow:{name:"grow",defaults:{enterPx:6,exitPx:4,enterScale:.95,exitScale:.98,blurInPx:0,blurOutPx:0,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"anchor",easingOpen:"cubic-bezier(0.34, 1.56, 0.64, 1)",easingClose:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",enterDuration:220,exitDuration:180},getKeyframes:({phase:e,side:t,cfg:i})=>{const s=this.vec(t,i.enterPx),r=this.vec(t,i.exitPx);return"open"===e?[this.kf(0,`translate3d(${s.x}px, ${s.y}px,0) scale(${i.enterScale})`),this.kf(1,"translate3d(0,0,0) scale(1)")]:[this.kf(1,"translate3d(0,0,0) scale(1)"),this.kf(0,`translate3d(${r.x}px, ${r.y}px,0) scale(${i.exitScale})`)]}}}}getPresetKeyframes(e,t,i,s){const r=this.presetRegistry(),n=r[e]??r.iosMenu;this.getBaseDefaults();const o={...n.defaults,...s??{}},a=this.computeOrigin(t,o.origin);return{keyframes:n.getKeyframes({side:t,phase:i,cfg:o,origin:a}),cfg:o,origin:a}}getBaseDefaults(){return{enterPx:12,exitPx:8,enterScale:.98,exitScale:.99,blurInPx:6,blurOutPx:3,perspectivePx:900,rotateDeg:10,tiltDeg:8,origin:"auto",easingOpen:"cubic-bezier(0.16, 1, 0.3, 1)",easingClose:"cubic-bezier(0.2, 0, 0, 1)",enterDuration:220,exitDuration:180}}async playPreset(e,t,i){if(this.checkForConflictingCSS(e),this.prefersReducedMotion())return;const s=this.opts.getPreset();if("none"===s)return;this.moveAnim?.cancel(),this.presetAnim?.cancel(),this._phase="open"===i?"opening":"closing",e.style.transition="none";const{keyframes:r,cfg:n,origin:o}=this.getPresetKeyframes(s,t,i),a="open"===i?n.enterDuration:n.exitDuration,c=this.is3dPreset(s);c?(e.style.transformStyle="preserve-3d",e.style.backfaceVisibility="hidden"):(e.style.transformStyle="",e.style.backfaceVisibility=""),e.style.transformOrigin=o;const l="open"===i?n.easingOpen:n.easingClose,p=e.animate(r,{duration:a,easing:l,fill:"both"});this.presetAnim=p;try{await p.finished}catch{}finally{this.presetAnim===p&&(this.presetAnim=void 0),e.style.transition="",c&&(e.style.transformStyle="",e.style.backfaceVisibility=""),this._phase="open"===i?"open":"idle"}}checkForConflictingCSS(e){const t=e.style.transition||"";t.includes("transform")&&t.includes("opacity")&&console.warn("Warning: Using 3D animation (WAAPI) alongside CSS transitions on 'transform' or 'opacity' can cause conflicts. Consider removing CSS transitions on these properties."),(t.includes("margin")||t.includes("padding"))&&console.warn("Warning: Animating 'margin' or 'padding' alongside 3D animation (WAAPI) may cause visual glitches. Please avoid transitioning these properties during WAAPI animations.")}animateMove(e,t,i){if("open"!==this._phase)return;const s=t.left-i.left,r=t.top-i.top;if(Math.abs(s)<.5&&Math.abs(r)<.5)return;this.moveAnim?.cancel();const n=this.opts.getRepositionMs(),o=e.animate([{transform:`translate3d(${s}px, ${r}px, 0)`},{transform:"translate3d(0, 0, 0)"}],{duration:n,easing:"cubic-bezier(0.16, 1, 0.3, 1)",fill:"both"});this.moveAnim=o,o.finished.finally(()=>{this.moveAnim===o&&(this.moveAnim=void 0)})}is3dPreset(e){return"flip3d"===e||"card3d"===e||"tilt3d"===e||"depth3d"===e||"rotate3d"===e}setSideAttr(e){const t=this.opts.getPopover();t&&t.setAttribute(this.opts.sideAttr,e)}setupObserversAndScrollParents(){if("undefined"==typeof window)return;const e=this.opts.getAnchor(),t=this.opts.getPopover();e&&"ResizeObserver"in window&&(this.anchorRO?.disconnect(),this.anchorRO=new ResizeObserver(()=>{this._open&&this.position()}),this.anchorRO.observe(e)),t&&"ResizeObserver"in window&&(this.popoverRO?.disconnect(),this.popoverRO=new ResizeObserver(()=>{this._open&&this.position()}),this.popoverRO.observe(t)),this.teardownScrollParents();const i=this.opts.scrollContainer;if("window"!==i)if(i instanceof HTMLElement)this.bindScroll(i);else if(e)for(const t of this.getScrollParents(e))this.bindScroll(t)}bindScroll(e){const t=this.onViewportMove;e.addEventListener("scroll",t,{passive:!0}),this.boundScrollParents.push({el:e,fn:t})}teardownScrollParents(){for(const{el:e,fn:t}of this.boundScrollParents)e.removeEventListener?.("scroll",t);this.boundScrollParents=[]}getScrollParents(e){const t=[];let i=e.parentElement;for(;i&&i!==document.body;){const e=getComputedStyle(i),s=e.overflowY,r=e.overflowX,n=("auto"===s||"scroll"===s||"overlay"===s)&&i.scrollHeight>i.clientHeight,o=("auto"===r||"scroll"===r||"overlay"===r)&&i.scrollWidth>i.clientWidth;(n||o)&&t.push(i),i=i.parentElement}return t}containsAcrossShadow(e,t){let i=t;for(;i;){if(i===e)return!0;if(i.parentNode)i=i.parentNode;else{if(!(i instanceof ShadowRoot))break;i=i.host}}return!1}captureFocusBeforeOpen(){this.lastFocusedEl=document.activeElement}elementIsTriggerRelated(e){if(!(e instanceof HTMLElement))return!1;const t=this.opts.getAnchor(),i=this.opts.getFocusTarget?.()??null;return!(!i||e!==i&&!i.contains(e))||!!t&&(!(e!==t&&!t.contains(e))||!!t.shadowRoot?.contains(e))}restoreFocus(){if(!this.opts.getRestoreFocusOnClose())return;const e=this.opts.getAnchor();if(!e)return;const t=this.opts.getFocusTarget?.()??e,i=document.activeElement,s=this.lastFocusedEl,r=this.opts.getPopover(),n=!!(r&&s&&r.contains(s)),o=this.elementIsTriggerRelated(s);(!!(r&&i&&r.contains(i))||n||o)&&t.focus?.({preventScroll:!0})}ensurePopoverMarginZero(){const e=this.opts.getPopover();e&&(e.style.margin||(e.style.margin="0"))}updateOption(e,t){this.opts[e]="function"==typeof t?t:()=>t,this._open&&e.startsWith("get")&&this.position()}}export{e as PopoverController};
 //# sourceMappingURL=popover-controller.js.map