@vonage/vivid 5.15.1 → 5.16.0

package/popover/definition.cjs

@@ -1,356 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const elevation_definition = require('../unbundled/definition6.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const dom = require('@floating-ui/dom');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-const localized = require('../unbundled/localized.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const icon_definition = require('../icon/definition.cjs');
-const button_definition = require('../unbundled/definition2.cjs');
-
-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.Localized(delegatesAria.DelegatesAria(vividElement.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 = [dom.inline(), dom.flip(), dom.shift(), dom.hide()];
-    let offsetValue = this.offset ?? 0;
-    if (this.arrow && this._arrowEl) {
-      offsetValue = 12;
-      middleware = [
-        ...middleware,
-        dom.arrow({ element: this._arrowEl, padding: 10 })
-      ];
-    }
-    if (offsetValue > 0) {
-      middleware.unshift(dom.offset(offsetValue));
-    }
-    return middleware;
-  }
-  /**
-   * @internal
-   */
-  #cleanup;
-  /**
-   * @internal
-   */
-  #updateAutoUpdate() {
-    this.#cleanup?.();
-    if (this.open && this.#currentAnchor && this._popoverEl) {
-      this.#cleanup = dom.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() {
-    if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
-    const positionData = await dom.computePosition(
-      this.#currentAnchor,
-      this._popoverEl,
-      {
-        placement: this.placement,
-        strategy: "fixed",
-        middleware: this.#middleware
-      }
-    );
-    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) {
-    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();
-    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;
-    }
-    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([
-  fastElement.attr({ mode: "fromView" })
-], Popover.prototype, "placement");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Popover.prototype, "manual");
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], Popover.prototype, "layout");
-__decorateClass([
-  fastElement.attr({
-    attribute: "offset",
-    mode: "fromView",
-    converter: fastElement.nullableNumberConverter
-  })
-], Popover.prototype, "offset");
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], Popover.prototype, "alternate");
-__decorateClass([
-  fastElement.attr({ attribute: "dismiss-button-aria-label" })
-], Popover.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Popover.prototype, "arrow");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], Popover.prototype, "open");
-__decorateClass([
-  fastElement.observable
-], Popover.prototype, "anchor");
-__decorateClass([
-  fastElement.observable
-], Popover.prototype, "_slottedAnchor");
-
-const getClasses = ({ open, manual, layout }) => fastWebUtilities.classNames(
-  "control",
-  ["open", Boolean(open)],
-  ["manual", Boolean(manual)],
-  ["condensed", layout === "condensed"]
-);
-const popoverTemplate = (context) => {
-  const elevationTag = context.tagFor(elevation_definition.Elevation);
-  const buttonTag = context.tagFor(button_definition.Button);
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html`
-		<slot name="anchor" ${fastElement.slotted("_slottedAnchor")}></slot>
-		<${elevationTag}>
-			<div class="base" 
-				${fastElement.ref("_popoverEl")} 
-				popover="${(x) => x.manual ? "manual" : "auto"}"
-				tabindex="-1"
-				autofocus
-				${delegatesAria.delegateAria({
-    role: "dialog",
-    ariaModal: "false"
-  })}
-			>
-				<div class="${getClasses}" 
-					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
-					<slot></slot>
-					<slot name="footer"></slot>
-					${fastElement.when(
-    (x) => x.manual,
-    fastElement.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}>`
-  )}
-					${fastElement.when(
-    (x) => x.arrow,
-    fastElement.html`<div class="arrow" ${fastElement.ref("_arrowEl")}></div>`
-  )}
-				</div>
-			</div>
-		</${elevationTag}>
-	`;
-};
-
-const popoverDefinition = vividElement.defineVividComponent(
-  "popover",
-  Popover,
-  popoverTemplate,
-  [button_definition.buttonDefinition, icon_definition.iconDefinition, elevation_definition.elevationDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerPopover = vividElement.createRegisterFunction(popoverDefinition);
-
-exports.VwcPopoverElement = Popover;
-exports.popoverDefinition = popoverDefinition;
-exports.registerPopover = registerPopover;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition51.cjs");
+exports.VwcPopoverElement = require_definition$1.Popover;
+exports.popoverDefinition = require_definition$1.popoverDefinition;
+exports.registerPopover = require_definition$1.registerPopover;

package/popover/definition.js

@@ -1,350 +1,3 @@
-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/definition2.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()];
-    let offsetValue = this.offset ?? 0;
-    if (this.arrow && this._arrowEl) {
-      offsetValue = 12;
-      middleware = [
-        ...middleware,
-        arrow({ element: this._arrowEl, padding: 10 })
-      ];
-    }
-    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() {
-    if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
-    const positionData = await computePosition(
-      this.#currentAnchor,
-      this._popoverEl,
-      {
-        placement: this.placement,
-        strategy: "fixed",
-        middleware: this.#middleware
-      }
-    );
-    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) {
-    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();
-    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;
-    }
-    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);
-
+import "../unbundled/definition2.js";
+import { n as registerPopover, r as Popover, t as popoverDefinition } from "../unbundled/definition51.js";
 export { Popover as VwcPopoverElement, popoverDefinition, registerPopover };