@vonage/vivid 5.7.0 → 5.9.0

package/popover/definition.js

@@ -0,0 +1,357 @@
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, nullableNumberConverter, observable, slotted, ref, when, html } from '@microsoft/fast-element';
+import { inline, flip, shift, hide, arrow, offset, autoUpdate, computePosition } from '@floating-ui/dom';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { L as Localized } from '../unbundled/localized.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+
+const styles = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Popover extends Localized(DelegatesAria(VividElement)) {
+  constructor() {
+    super(...arguments);
+    this.placement = "bottom";
+    this.manual = false;
+    this.layout = "default";
+    this.offset = 8;
+    this.alternate = false;
+    this.dismissButtonAriaLabel = null;
+    this.arrow = false;
+    this.open = false;
+    /**
+     * @internal
+     */
+    this.#currentAnchor = null;
+    /**
+     * @internal
+     */
+    this.#manualToggle = () => {
+      this._popoverEl.togglePopover();
+    };
+    /**
+     * @internal
+     */
+    this.#autoUpdateCallback = () => {
+      this.#lastPositionUpdate = this.updatePosition();
+    };
+    // --- Lifecycle & Events ---
+    /**
+     * Syncs native toggle state (Esc key, light dismiss) back to the 'open' attribute.
+     * @internal
+     */
+    this.#handleNativeToggle = (e) => {
+      const isOpen = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
+      if (this.open !== isOpen) {
+        this.open = isOpen;
+      }
+      this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
+    };
+  }
+  placementChanged() {
+    this.#updateAutoUpdate();
+  }
+  arrowChanged() {
+    this.#updateAutoUpdate();
+  }
+  openChanged(_oldValue, newValue) {
+    if (!this._popoverEl) return;
+    const isOpen = this._popoverEl.matches(":popover-open");
+    if (newValue && !isOpen) {
+      this._popoverEl.showPopover();
+    } else if (!newValue && isOpen) {
+      this._popoverEl.hidePopover();
+    }
+    this.#updateAutoUpdate();
+  }
+  anchorChanged() {
+    this.#updateAnchor();
+  }
+  _slottedAnchorChanged() {
+    this.#updateAnchor();
+  }
+  #currentAnchor;
+  /**
+   * @internal
+   */
+  #updateAnchor() {
+    if (!this._popoverEl) return;
+    const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
+    if (this.#currentAnchor === newAnchor) return;
+    if (this.#currentAnchor) {
+      this.#unbindTrigger(this.#currentAnchor);
+    }
+    this.#currentAnchor = newAnchor;
+    if (this.#currentAnchor && this._popoverEl) {
+      this.#bindTrigger(this.#currentAnchor);
+      this.#updateAutoUpdate();
+    }
+  }
+  /**
+   * @internal
+   */
+  #bindTrigger(anchor) {
+    anchor.setAttribute("aria-haspopup", "dialog");
+    if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) {
+      anchor.popoverTargetElement = this._popoverEl;
+    } else {
+      anchor.addEventListener("click", this.#manualToggle);
+    }
+  }
+  /**
+   * @internal
+   */
+  #unbindTrigger(anchor) {
+    anchor.removeAttribute("aria-haspopup");
+    if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) {
+      anchor.popoverTargetElement = null;
+    } else {
+      anchor.removeEventListener("click", this.#manualToggle);
+    }
+  }
+  #manualToggle;
+  // --- Floating UI Logic ---
+  /**
+   * @internal
+   */
+  get #middleware() {
+    let middleware = [inline(), flip(), shift(), hide()];
+    /* v8 ignore next -- @preserve */
+    let offsetValue = this.offset ?? 0;
+    if (this.arrow && this._arrowEl) {
+      offsetValue = 12;
+      middleware = [
+        ...middleware,
+        arrow({ element: this._arrowEl, padding: 10 })
+      ];
+    }
+    /* v8 ignore else -- @preserve */
+    if (offsetValue > 0) {
+      middleware.unshift(offset(offsetValue));
+    }
+    return middleware;
+  }
+  /**
+   * @internal
+   */
+  #cleanup;
+  /**
+   * @internal
+   */
+  #updateAutoUpdate() {
+    this.#cleanup?.();
+    if (this.open && this.#currentAnchor && this._popoverEl) {
+      this.#cleanup = autoUpdate(
+        this.#currentAnchor,
+        this._popoverEl,
+        this.#autoUpdateCallback
+      );
+    }
+  }
+  /**
+   * Tracks the promise of the last position update.
+   * @internal
+   */
+  #lastPositionUpdate;
+  #autoUpdateCallback;
+  /**
+   * Updates the position of the popover
+   * @public
+   */
+  async updatePosition() {
+    /* v8 ignore if -- @preserve */
+    if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
+    const positionData = await computePosition(
+      this.#currentAnchor,
+      this._popoverEl,
+      {
+        placement: this.placement,
+        strategy: "fixed",
+        middleware: this.#middleware
+      }
+    );
+    /* v8 ignore if -- @preserve */
+    if (!this.open) return;
+    this.#assignPopoverPosition(positionData);
+    if (this.arrow && this._arrowEl) {
+      this.#assignArrowPosition(positionData);
+    }
+  }
+  /**
+   * @internal
+   */
+  #assignPopoverPosition(data) {
+    const { x, y } = data;
+    Object.assign(this._popoverEl.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+    });
+  }
+  /**
+   * @internal
+   */
+  #assignArrowPosition(data) {
+    /* v8 ignore if -- @preserve */
+    if (!this._arrowEl) return;
+    const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+    const styles = {
+      left: "calc(100% - 4px)",
+      right: "-4px",
+      top: "calc(100% - 4px)",
+      bottom: "-4px"
+    };
+    const staticAxis = data.placement.split("-")[0];
+    Object.assign(this._arrowEl.style, {
+      left: arrowX ? `${arrowX}px` : styles[staticAxis],
+      top: arrowY ? `${arrowY}px` : styles[staticAxis]
+    });
+  }
+  #handleNativeToggle;
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateAnchor();
+    /* v8 ignore else -- @preserve */
+    if (this._popoverEl) {
+      this._popoverEl.addEventListener("toggle", this.#handleNativeToggle);
+      if (this.open && !this._popoverEl.matches(":popover-open")) {
+        this._popoverEl.showPopover();
+        this.#updateAutoUpdate();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#cleanup?.();
+    if (this.#currentAnchor) {
+      this.#unbindTrigger(this.#currentAnchor);
+      this.#currentAnchor = null;
+    }
+    /* v8 ignore else -- @preserve */
+    if (this._popoverEl) {
+      this._popoverEl.removeEventListener("toggle", this.#handleNativeToggle);
+    }
+  }
+  // --- Methods ---
+  show() {
+    this.open = true;
+    return this.#lastPositionUpdate ?? Promise.resolve();
+  }
+  hide() {
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+}
+__decorateClass([
+  attr({ mode: "fromView" })
+], Popover.prototype, "placement");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Popover.prototype, "manual");
+__decorateClass([
+  attr({ mode: "fromView" })
+], Popover.prototype, "layout");
+__decorateClass([
+  attr({
+    attribute: "offset",
+    mode: "fromView",
+    converter: nullableNumberConverter
+  })
+], Popover.prototype, "offset");
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popover.prototype, "alternate");
+__decorateClass([
+  attr({ attribute: "dismiss-button-aria-label" })
+], Popover.prototype, "dismissButtonAriaLabel");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Popover.prototype, "arrow");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Popover.prototype, "open");
+__decorateClass([
+  observable
+], Popover.prototype, "anchor");
+__decorateClass([
+  observable
+], Popover.prototype, "_slottedAnchor");
+
+const getClasses = ({ open, manual, layout }) => classNames(
+  "control",
+  ["open", Boolean(open)],
+  ["manual", Boolean(manual)],
+  ["condensed", layout === "condensed"]
+);
+const popoverTemplate = (context) => {
+  const elevationTag = context.tagFor(Elevation);
+  const buttonTag = context.tagFor(Button);
+  const iconTag = context.tagFor(Icon);
+  return html`
+		<slot name="anchor" ${slotted("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base" 
+				${ref("_popoverEl")} 
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${delegateAria({
+    role: "dialog",
+    ariaModal: "false"
+  })}
+			>
+				<div class="${getClasses}" 
+					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${when(
+    (x) => x.manual,
+    html`<${buttonTag}
+							aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${(x) => x.hide()}">
+							<${iconTag} name="close-line" slot="icon"></${iconTag}>
+						</${buttonTag}>`
+  )}
+					${when(
+    (x) => x.arrow,
+    html`<div class="arrow" ${ref("_arrowEl")}></div>`
+  )}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
+
+const popoverDefinition = defineVividComponent(
+  "popover",
+  Popover,
+  popoverTemplate,
+  [buttonDefinition, iconDefinition, elevationDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerPopover = createRegisterFunction(popoverDefinition);
+
+export { Popover as VwcPopoverElement, popoverDefinition, registerPopover };

package/popover/index.cjs

@@ -0,0 +1,27 @@
+"use strict";const u=require("../bundled/definition4.cjs"),i=require("../bundled/vivid-element.cjs"),l=require("../bundled/floating-ui.dom.cjs"),v=require("../bundled/delegates-aria.cjs"),m=require("../bundled/localized.cjs"),b=require("../bundled/definition2.cjs"),f=require("../bundled/definition3.cjs"),g=require("../bundled/slotted.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),E=":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";var _=Object.defineProperty,a=(n,e,t,r)=>{for(var o=void 0,p=n.length-1,c;p>=0;p--)(c=n[p])&&(o=c(e,t,o)||o);return o&&_(e,t,o),o};class s extends m.Localized(v.DelegatesAria(i.VividElement)){constructor(){super(...arguments),this.placement="bottom",this.manual=!1,this.layout="default",this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#i=()=>{this._popoverEl.togglePopover()},this.#l=()=>{this.#n=this.updatePosition()},this.#s=e=>{const t=e.newState?e.newState==="open":this._popoverEl.matches(":popover-open");this.open!==t&&(this.open=t),this.$emit(t?"open":"close",void 0,{bubbles:!1})}}placementChanged(){this.#t()}arrowChanged(){this.#t()}openChanged(e,t){if(!this._popoverEl)return;const r=this._popoverEl.matches(":popover-open");t&&!r?this._popoverEl.showPopover():!t&&r&&this._popoverEl.hidePopover(),this.#t()}anchorChanged(){this.#o()}_slottedAnchorChanged(){this.#o()}#e;#o(){if(!this._popoverEl)return;const e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#a(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#p(this.#e),this.#t()))}#p(e){e.setAttribute("aria-haspopup","dialog"),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener("click",this.#i)}#a(e){e.removeAttribute("aria-haspopup"),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener("click",this.#i)}#i;get#c(){let e=[l.inline(),l.flip(),l.shift(),l.hide()];/* v8 ignore next -- @preserve */let t=this.offset??0;this.arrow&&this._arrowEl&&(t=12,e=[...e,l.arrow({element:this._arrowEl,padding:10})]);/* v8 ignore else -- @preserve */return t>0&&e.unshift(l.offset(t)),e}#r;#t(){this.#r?.(),this.open&&this.#e&&this._popoverEl&&(this.#r=l.autoUpdate(this.#e,this._popoverEl,this.#l))}#n;#l;async updatePosition(){/* v8 ignore if -- @preserve */if(!this.open||!this.#e||!this._popoverEl)return;const e=await l.computePosition(this.#e,this._popoverEl,{placement:this.placement,strategy:"fixed",middleware:this.#c});/* v8 ignore if -- @preserve */this.open&&(this.#d(e),this.arrow&&this._arrowEl&&this.#h(e))}#d(e){const{x:t,y:r}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${r}px`,visibility:e.middlewareData.hide?.referenceHidden?"hidden":"visible"})}#h(e){/* v8 ignore if -- @preserve */if(!this._arrowEl)return;const{x:t,y:r}=e.middlewareData.arrow,o={left:"calc(100% - 4px)",right:"-4px",top:"calc(100% - 4px)",bottom:"-4px"},p=e.placement.split("-")[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:o[p],top:r?`${r}px`:o[p]})}#s;connectedCallback(){super.connectedCallback(),this.#o();/* v8 ignore else -- @preserve */this._popoverEl&&(this._popoverEl.addEventListener("toggle",this.#s),this.open&&!this._popoverEl.matches(":popover-open")&&(this._popoverEl.showPopover(),this.#t()))}disconnectedCallback(){super.disconnectedCallback(),this.#r?.(),this.#e&&(this.#a(this.#e),this.#e=null);/* v8 ignore else -- @preserve */this._popoverEl&&this._popoverEl.removeEventListener("toggle",this.#s)}show(){return this.open=!0,this.#n??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}}a([i.attr({mode:"fromView"})],s.prototype,"placement");a([i.attr({mode:"boolean"})],s.prototype,"manual");a([i.attr({mode:"fromView"})],s.prototype,"layout");a([i.attr({attribute:"offset",mode:"fromView",converter:i.nullableNumberConverter})],s.prototype,"offset");a([i.attr({mode:"boolean"})],s.prototype,"alternate");a([i.attr({attribute:"dismiss-button-aria-label"})],s.prototype,"dismissButtonAriaLabel");a([i.attr({mode:"boolean"})],s.prototype,"arrow");a([i.attr({mode:"boolean"})],s.prototype,"open");a([i.observable],s.prototype,"anchor");a([i.observable],s.prototype,"_slottedAnchor");const x=({open:n,manual:e,layout:t})=>w.classNames("control",["open",!!n],["manual",!!e],["condensed",t==="condensed"]),k=n=>{const e=n.tagFor(u.Elevation),t=n.tagFor(f.Button),r=n.tagFor(b.Icon);return i.html`
+		<slot name="anchor" ${g.slotted("_slottedAnchor")}></slot>
+		<${e}>
+			<div class="base" 
+				${d.ref("_popoverEl")} 
+				popover="${o=>o.manual?"manual":"auto"}"
+				tabindex="-1"
+				autofocus
+				${v.delegateAria({role:"dialog",ariaModal:"false"})}
+			>
+				<div class="${x}" 
+					part="${o=>o.alternate?"vvd-theme-alternate":""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${h.when(o=>o.manual,i.html`<${t}
+							aria-label="${o=>o.dismissButtonAriaLabel||o.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${o=>o.hide()}">
+							<${r} name="close-line" slot="icon"></${r}>
+						</${t}>`)}
+					${h.when(o=>o.arrow,i.html`<div class="arrow" ${d.ref("_arrowEl")}></div>`)}
+				</div>
+			</div>
+		</${e}>
+	`},y=i.defineVividComponent("popover",s,k,[f.buttonDefinition,b.iconDefinition,u.elevationDefinition],{styles:E,shadowOptions:{delegatesFocus:!0}}),$=i.createRegisterFunction(y);$();

package/popover/index.js

@@ -0,0 +1,263 @@
+import { E as m, e as u } from "../bundled/definition4.js";
+import { V as b, a as n, n as f, o as v, h as p, c as g, d as w } from "../bundled/vivid-element.js";
+import { i as E, f as _, b as x, h as k, c as y, o as $, d as A, e as P } from "../bundled/floating-ui.dom.js";
+import { D as C, d as L } from "../bundled/delegates-aria.js";
+import { L as T } from "../bundled/localized.js";
+import { I as B, i as D } from "../bundled/definition2.js";
+import { B as V, b as O } from "../bundled/definition3.js";
+import { s as z } from "../bundled/slotted.js";
+import { r as d } from "../bundled/ref.js";
+import { w as h } from "../bundled/when.js";
+import { c as F } from "../bundled/class-names.js";
+const H = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+var M = Object.defineProperty, r = (a, o, e, s) => {
+  for (var t = void 0, l = a.length - 1, c; l >= 0; l--)
+    (c = a[l]) && (t = c(o, e, t) || t);
+  return t && M(o, e, t), t;
+};
+class i extends T(C(b)) {
+  constructor() {
+    super(...arguments), this.placement = "bottom", this.manual = !1, this.layout = "default", this.offset = 8, this.alternate = !1, this.dismissButtonAriaLabel = null, this.arrow = !1, this.open = !1, this.#o = null, this.#s = () => {
+      this._popoverEl.togglePopover();
+    }, this.#l = () => {
+      this.#n = this.updatePosition();
+    }, this.#r = (o) => {
+      const e = o.newState ? o.newState === "open" : this._popoverEl.matches(":popover-open");
+      this.open !== e && (this.open = e), this.$emit(e ? "open" : "close", void 0, { bubbles: !1 });
+    };
+  }
+  placementChanged() {
+    this.#e();
+  }
+  arrowChanged() {
+    this.#e();
+  }
+  openChanged(o, e) {
+    if (!this._popoverEl) return;
+    const s = this._popoverEl.matches(":popover-open");
+    e && !s ? this._popoverEl.showPopover() : !e && s && this._popoverEl.hidePopover(), this.#e();
+  }
+  anchorChanged() {
+    this.#t();
+  }
+  _slottedAnchorChanged() {
+    this.#t();
+  }
+  #o;
+  /**
+   * @internal
+   */
+  #t() {
+    if (!this._popoverEl) return;
+    const o = this.anchor || this._slottedAnchor?.[0] || null;
+    this.#o !== o && (this.#o && this.#a(this.#o), this.#o = o, this.#o && this._popoverEl && (this.#p(this.#o), this.#e()));
+  }
+  /**
+   * @internal
+   */
+  #p(o) {
+    o.setAttribute("aria-haspopup", "dialog"), o instanceof HTMLButtonElement || o instanceof HTMLInputElement ? o.popoverTargetElement = this._popoverEl : o.addEventListener("click", this.#s);
+  }
+  /**
+   * @internal
+   */
+  #a(o) {
+    o.removeAttribute("aria-haspopup"), o instanceof HTMLButtonElement || o instanceof HTMLInputElement ? o.popoverTargetElement = null : o.removeEventListener("click", this.#s);
+  }
+  #s;
+  // --- Floating UI Logic ---
+  /**
+   * @internal
+   */
+  get #c() {
+    let o = [E(), _(), x(), k()];
+    /* v8 ignore next -- @preserve */
+    let e = this.offset ?? 0;
+    this.arrow && this._arrowEl && (e = 12, o = [
+      ...o,
+      y({ element: this._arrowEl, padding: 10 })
+    ]);
+    /* v8 ignore else -- @preserve */
+    return e > 0 && o.unshift($(e)), o;
+  }
+  /**
+   * @internal
+   */
+  #i;
+  /**
+   * @internal
+   */
+  #e() {
+    this.#i?.(), this.open && this.#o && this._popoverEl && (this.#i = A(
+      this.#o,
+      this._popoverEl,
+      this.#l
+    ));
+  }
+  /**
+   * Tracks the promise of the last position update.
+   * @internal
+   */
+  #n;
+  #l;
+  /**
+   * Updates the position of the popover
+   * @public
+   */
+  async updatePosition() {
+    /* v8 ignore if -- @preserve */
+    if (!this.open || !this.#o || !this._popoverEl) return;
+    const o = await P(
+      this.#o,
+      this._popoverEl,
+      {
+        placement: this.placement,
+        strategy: "fixed",
+        middleware: this.#c
+      }
+    );
+    /* v8 ignore if -- @preserve */
+    this.open && (this.#d(o), this.arrow && this._arrowEl && this.#h(o));
+  }
+  /**
+   * @internal
+   */
+  #d(o) {
+    const { x: e, y: s } = o;
+    Object.assign(this._popoverEl.style, {
+      left: `${e}px`,
+      top: `${s}px`,
+      visibility: o.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+    });
+  }
+  /**
+   * @internal
+   */
+  #h(o) {
+    /* v8 ignore if -- @preserve */
+    if (!this._arrowEl) return;
+    const { x: e, y: s } = o.middlewareData.arrow, t = {
+      left: "calc(100% - 4px)",
+      right: "-4px",
+      top: "calc(100% - 4px)",
+      bottom: "-4px"
+    }, l = o.placement.split("-")[0];
+    Object.assign(this._arrowEl.style, {
+      left: e ? `${e}px` : t[l],
+      top: s ? `${s}px` : t[l]
+    });
+  }
+  #r;
+  connectedCallback() {
+    super.connectedCallback(), this.#t();
+    /* v8 ignore else -- @preserve */
+    this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#r), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#e()));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#i?.(), this.#o && (this.#a(this.#o), this.#o = null);
+    /* v8 ignore else -- @preserve */
+    this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#r);
+  }
+  // --- Methods ---
+  show() {
+    return this.open = !0, this.#n ?? Promise.resolve();
+  }
+  hide() {
+    this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+}
+r([
+  n({ mode: "fromView" })
+], i.prototype, "placement");
+r([
+  n({ mode: "boolean" })
+], i.prototype, "manual");
+r([
+  n({ mode: "fromView" })
+], i.prototype, "layout");
+r([
+  n({
+    attribute: "offset",
+    mode: "fromView",
+    converter: f
+  })
+], i.prototype, "offset");
+r([
+  n({
+    mode: "boolean"
+  })
+], i.prototype, "alternate");
+r([
+  n({ attribute: "dismiss-button-aria-label" })
+], i.prototype, "dismissButtonAriaLabel");
+r([
+  n({ mode: "boolean" })
+], i.prototype, "arrow");
+r([
+  n({ mode: "boolean" })
+], i.prototype, "open");
+r([
+  v
+], i.prototype, "anchor");
+r([
+  v
+], i.prototype, "_slottedAnchor");
+const I = ({ open: a, manual: o, layout: e }) => F(
+  "control",
+  ["open", !!a],
+  ["manual", !!o],
+  ["condensed", e === "condensed"]
+), U = (a) => {
+  const o = a.tagFor(m), e = a.tagFor(V), s = a.tagFor(B);
+  return p`
+		<slot name="anchor" ${z("_slottedAnchor")}></slot>
+		<${o}>
+			<div class="base" 
+				${d("_popoverEl")} 
+				popover="${(t) => t.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${L({
+    role: "dialog",
+    ariaModal: "false"
+  })}
+			>
+				<div class="${I}" 
+					part="${(t) => t.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${h(
+    (t) => t.manual,
+    p`<${e}
+							aria-label="${(t) => t.dismissButtonAriaLabel || t.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${(t) => t.hide()}">
+							<${s} name="close-line" slot="icon"></${s}>
+						</${e}>`
+  )}
+					${h(
+    (t) => t.arrow,
+    p`<div class="arrow" ${d("_arrowEl")}></div>`
+  )}
+				</div>
+			</div>
+		</${o}>
+	`;
+}, j = w(
+  "popover",
+  i,
+  U,
+  [O, D, u],
+  {
+    styles: H,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), N = g(j);
+N();