@vonage/vivid 5.2.0 → 5.4.0

package/unbundled/definition5.cjs

@@ -1,7 +1,10 @@
 'use strict';
 
+const button_definition = require('./definition.cjs');
+const elevation_definition = require('./definition6.cjs');
 const vividElement = require('./vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
+const dom = require('@floating-ui/dom');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 var __defProp = Object.defineProperty;
@@ -13,44 +16,283 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Elevation extends vividElement.VividElement {
+const PlacementStrategy = {
+  Flip: "flip",
+  AutoPlacementHorizontal: "auto-placement-horizontal",
+  AutoPlacementVertical: "auto-placement-vertical"
+};
+const placementStrategyMiddlewares = {
+  [PlacementStrategy.Flip]: dom.flip(),
+  [PlacementStrategy.AutoPlacementHorizontal]: dom.autoPlacement({
+    allowedPlacements: [
+      "bottom",
+      "top",
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end"
+    ]
+  }),
+  [PlacementStrategy.AutoPlacementVertical]: dom.autoPlacement({
+    allowedPlacements: [
+      "left",
+      "right",
+      "left-start",
+      "left-end",
+      "right-start",
+      "right-end"
+    ]
+  })
+};
+class Popup extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.dismissible = false;
+    this.arrow = false;
+    this.alternate = false;
+    /**
+     * The placement strategy of the popup.
+     *
+     * @public
+     */
+    this.placementStrategy = PlacementStrategy.Flip;
+    this.animationFrame = false;
+    this.strategy = "fixed";
+    this.offset = null;
+    this.#autoUpdateCallback = () => {
+      this.#lastPositionUpdate = this.updatePosition();
+      return this.#lastPositionUpdate;
+    };
+  }
+  get #middleware() {
+    let middleware = [
+      dom.inline(),
+      placementStrategyMiddlewares[this.placementStrategy],
+      dom.hide(),
+      dom.size({
+        apply({ availableWidth, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${availableWidth}px`,
+            maxHeight: `${availableHeight}px`
+          });
+        }
+      })
+    ];
+    let offsetValue = this.offset ?? 0;
+    if (this.arrow) {
+      offsetValue += 12;
+      middleware = [
+        ...middleware,
+        dom.arrow({ element: this.arrowEl, padding: 10 })
+      ];
+    }
+    if (offsetValue > 0) {
+      middleware.unshift(dom.offset(offsetValue));
+    }
+    return middleware;
+  }
+  #cleanup;
+  openChanged(_, newValue) {
+    this.#togglePopover();
+    this.#updateAutoUpdate();
+    this.$emit(newValue ? "vwc-popup:open" : "vwc-popup:close");
+  }
+  /**
+   * @internal
+   */
+  animationFrameChanged() {
+    this.#updateAutoUpdate();
+  }
+  /**
+   * @internal
+   */
+  anchorChanged() {
+    this.#updateAutoUpdate();
+  }
+  /**
+   * @internal
+   */
+  strategyChanged() {
+    this.#togglePopover();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#togglePopover();
+    this.#updateAutoUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#updateAutoUpdate();
+  }
+  #updateAutoUpdate() {
+    this.#cleanup?.();
+    if (this.open && this.controlEl) {
+      this.controlEl.classList.add("open");
+    }
+    if (this.anchorEl && this.open && this.popupEl) {
+      this.#cleanup = dom.autoUpdate(
+        this.anchorEl,
+        this.popupEl,
+        this.#autoUpdateCallback,
+        {
+          animationFrame: this.animationFrame
+        }
+      );
+    }
+  }
+  #togglePopover() {
+    if (this.popupEl && this.strategy === "fixed") {
+      if (this.open) {
+        this.popupEl.showPopover();
+      } else {
+        this.popupEl.hidePopover();
+      }
+    }
+  }
+  #lastPositionUpdate;
+  #autoUpdateCallback;
+  /**
+   * Updates popup's position
+   *
+   * @public
+   */
+  async updatePosition() {
+    if (!this.open || !this.anchorEl) {
+      return;
+    }
+    const positionData = await dom.computePosition(this.anchorEl, this.popupEl, {
+      placement: this.placement,
+      strategy: this.strategy,
+      middleware: this.#middleware
+    });
+    this.#assignPopupPosition(positionData);
+    if (this.arrow) {
+      this.#assignArrowPosition(positionData);
+    }
+  }
+  #assignPopupPosition(data) {
+    const { x: popupX, y: popupY } = data;
+    const { referenceHidden } = data.middlewareData.hide;
+    Object.assign(this.popupEl.style, {
+      left: `${popupX}px`,
+      top: `${popupY}px`,
+      visibility: referenceHidden ? "hidden" : "visible"
+    });
+  }
+  #assignArrowPosition(data) {
+    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]
+    });
+  }
+  get anchorEl() {
+    return this.anchor ?? null;
+  }
+  /**
+   * Shows the popup.
+   * Unlike toggling the `open` attribute, show() will wait for the popup to become visible and positioned correctly.
+   */
+  show() {
+    this.open = true;
+    return this.#lastPositionUpdate ?? Promise.resolve();
+  }
+  hide() {
+    this.open = false;
+  }
 }
 __decorateClass([
-  fastElement.attr
-], Elevation.prototype, "dp");
+  fastElement.attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "open");
+__decorateClass([
+  fastElement.attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "dismissible");
+__decorateClass([
+  fastElement.attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "arrow");
 __decorateClass([
-  fastElement.attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow");
+  fastElement.attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "alternate");
 __decorateClass([
-  fastElement.attr({ attribute: "not-relative", mode: "boolean" })
-], Elevation.prototype, "notRelative");
+  fastElement.attr({ mode: "fromView" })
+], Popup.prototype, "placement");
+__decorateClass([
+  fastElement.attr({ mode: "boolean", attribute: "animation-frame" })
+], Popup.prototype, "animationFrame");
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], Popup.prototype, "strategy");
+__decorateClass([
+  fastElement.attr({ attribute: "offset", converter: fastElement.nullableNumberConverter })
+], Popup.prototype, "offset");
+__decorateClass([
+  fastElement.observable
+], Popup.prototype, "anchor");
 
-const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 
-const getClasses = ({ dp, noShadow, notRelative }) => fastWebUtilities.classNames(
+const getClasses = ({ open, dismissible, alternate }) => fastWebUtilities.classNames(
   "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)],
-  ["not-relative", Boolean(notRelative)]
+  ["open", Boolean(open)],
+  ["dismissible", Boolean(dismissible)],
+  ["alternate", Boolean(alternate)]
 );
-const elevationTemplate = fastElement.html` <div
-	class="${getClasses}"
-	part="base"
->
-	<slot></slot>
-</div>`;
+function handlePopover(x) {
+  return x.strategy && x.strategy === "fixed" ? "manual" : null;
+}
+const popupTemplate = (context) => {
+  const elevationTag = context.tagFor(elevation_definition.Elevation);
+  const buttonTag = context.tagFor(button_definition.Button);
+  return fastElement.html`
+  <${elevationTag}>
+		<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${fastElement.ref("popupEl")} part="popup-base">
+			<div ${fastElement.ref("controlEl")} class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
+				part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+				<div class="popup-content">
+					<slot></slot>
+					${fastElement.when(
+    (x) => x.dismissible,
+    fastElement.html`<${buttonTag} size="condensed" @click="${(x) => x.open = false}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${buttonTag}>`
+  )}
+				</div>
+				${fastElement.when(
+    (x) => x.arrow,
+    fastElement.html`<div class="arrow" ${fastElement.ref("arrowEl")}></div>`
+  )}
+			</div>
+    </div>
+  </${elevationTag}>`;
+};
 
-const elevationDefinition = vividElement.defineVividComponent(
-  "elevation",
-  Elevation,
-  elevationTemplate,
-  [],
+const popupDefinition = vividElement.defineVividComponent(
+  "popup",
+  Popup,
+  popupTemplate,
+  [elevation_definition.elevationDefinition, button_definition.buttonDefinition],
   {
     styles
   }
 );
-const registerElevation = vividElement.createRegisterFunction(elevationDefinition);
+const registerPopup = vividElement.createRegisterFunction(popupDefinition);
 
-exports.Elevation = Elevation;
-exports.elevationDefinition = elevationDefinition;
-exports.registerElevation = registerElevation;
+exports.PlacementStrategy = PlacementStrategy;
+exports.Popup = Popup;
+exports.popupDefinition = popupDefinition;
+exports.registerPopup = registerPopup;

package/unbundled/definition5.js

@@ -1,5 +1,8 @@
+import { B as Button, b as buttonDefinition } from './definition.js';
+import { E as Elevation, e as elevationDefinition } from './definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
-import { attr, html } from '@microsoft/fast-element';
+import { attr, nullableNumberConverter, observable, ref, when, html } from '@microsoft/fast-element';
+import { inline, autoPlacement, flip, hide, size, arrow, offset, autoUpdate, computePosition } from '@floating-ui/dom';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
@@ -11,42 +14,280 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Elevation extends VividElement {
+const PlacementStrategy = {
+  Flip: "flip",
+  AutoPlacementHorizontal: "auto-placement-horizontal",
+  AutoPlacementVertical: "auto-placement-vertical"
+};
+const placementStrategyMiddlewares = {
+  [PlacementStrategy.Flip]: flip(),
+  [PlacementStrategy.AutoPlacementHorizontal]: autoPlacement({
+    allowedPlacements: [
+      "bottom",
+      "top",
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end"
+    ]
+  }),
+  [PlacementStrategy.AutoPlacementVertical]: autoPlacement({
+    allowedPlacements: [
+      "left",
+      "right",
+      "left-start",
+      "left-end",
+      "right-start",
+      "right-end"
+    ]
+  })
+};
+class Popup extends VividElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.dismissible = false;
+    this.arrow = false;
+    this.alternate = false;
+    /**
+     * The placement strategy of the popup.
+     *
+     * @public
+     */
+    this.placementStrategy = PlacementStrategy.Flip;
+    this.animationFrame = false;
+    this.strategy = "fixed";
+    this.offset = null;
+    this.#autoUpdateCallback = () => {
+      this.#lastPositionUpdate = this.updatePosition();
+      return this.#lastPositionUpdate;
+    };
+  }
+  get #middleware() {
+    let middleware = [
+      inline(),
+      placementStrategyMiddlewares[this.placementStrategy],
+      hide(),
+      size({
+        apply({ availableWidth, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${availableWidth}px`,
+            maxHeight: `${availableHeight}px`
+          });
+        }
+      })
+    ];
+    let offsetValue = this.offset ?? 0;
+    if (this.arrow) {
+      offsetValue += 12;
+      middleware = [
+        ...middleware,
+        arrow({ element: this.arrowEl, padding: 10 })
+      ];
+    }
+    if (offsetValue > 0) {
+      middleware.unshift(offset(offsetValue));
+    }
+    return middleware;
+  }
+  #cleanup;
+  openChanged(_, newValue) {
+    this.#togglePopover();
+    this.#updateAutoUpdate();
+    this.$emit(newValue ? "vwc-popup:open" : "vwc-popup:close");
+  }
+  /**
+   * @internal
+   */
+  animationFrameChanged() {
+    this.#updateAutoUpdate();
+  }
+  /**
+   * @internal
+   */
+  anchorChanged() {
+    this.#updateAutoUpdate();
+  }
+  /**
+   * @internal
+   */
+  strategyChanged() {
+    this.#togglePopover();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#togglePopover();
+    this.#updateAutoUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#updateAutoUpdate();
+  }
+  #updateAutoUpdate() {
+    this.#cleanup?.();
+    if (this.open && this.controlEl) {
+      this.controlEl.classList.add("open");
+    }
+    if (this.anchorEl && this.open && this.popupEl) {
+      this.#cleanup = autoUpdate(
+        this.anchorEl,
+        this.popupEl,
+        this.#autoUpdateCallback,
+        {
+          animationFrame: this.animationFrame
+        }
+      );
+    }
+  }
+  #togglePopover() {
+    if (this.popupEl && this.strategy === "fixed") {
+      if (this.open) {
+        this.popupEl.showPopover();
+      } else {
+        this.popupEl.hidePopover();
+      }
+    }
+  }
+  #lastPositionUpdate;
+  #autoUpdateCallback;
+  /**
+   * Updates popup's position
+   *
+   * @public
+   */
+  async updatePosition() {
+    if (!this.open || !this.anchorEl) {
+      return;
+    }
+    const positionData = await computePosition(this.anchorEl, this.popupEl, {
+      placement: this.placement,
+      strategy: this.strategy,
+      middleware: this.#middleware
+    });
+    this.#assignPopupPosition(positionData);
+    if (this.arrow) {
+      this.#assignArrowPosition(positionData);
+    }
+  }
+  #assignPopupPosition(data) {
+    const { x: popupX, y: popupY } = data;
+    const { referenceHidden } = data.middlewareData.hide;
+    Object.assign(this.popupEl.style, {
+      left: `${popupX}px`,
+      top: `${popupY}px`,
+      visibility: referenceHidden ? "hidden" : "visible"
+    });
+  }
+  #assignArrowPosition(data) {
+    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]
+    });
+  }
+  get anchorEl() {
+    return this.anchor ?? null;
+  }
+  /**
+   * Shows the popup.
+   * Unlike toggling the `open` attribute, show() will wait for the popup to become visible and positioned correctly.
+   */
+  show() {
+    this.open = true;
+    return this.#lastPositionUpdate ?? Promise.resolve();
+  }
+  hide() {
+    this.open = false;
+  }
 }
 __decorateClass([
-  attr
-], Elevation.prototype, "dp");
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "open");
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "dismissible");
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "arrow");
 __decorateClass([
-  attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow");
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "alternate");
 __decorateClass([
-  attr({ attribute: "not-relative", mode: "boolean" })
-], Elevation.prototype, "notRelative");
+  attr({ mode: "fromView" })
+], Popup.prototype, "placement");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "animation-frame" })
+], Popup.prototype, "animationFrame");
+__decorateClass([
+  attr({ mode: "fromView" })
+], Popup.prototype, "strategy");
+__decorateClass([
+  attr({ attribute: "offset", converter: nullableNumberConverter })
+], Popup.prototype, "offset");
+__decorateClass([
+  observable
+], Popup.prototype, "anchor");
 
-const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 
-const getClasses = ({ dp, noShadow, notRelative }) => classNames(
+const getClasses = ({ open, dismissible, alternate }) => classNames(
   "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)],
-  ["not-relative", Boolean(notRelative)]
+  ["open", Boolean(open)],
+  ["dismissible", Boolean(dismissible)],
+  ["alternate", Boolean(alternate)]
 );
-const elevationTemplate = html` <div
-	class="${getClasses}"
-	part="base"
->
-	<slot></slot>
-</div>`;
+function handlePopover(x) {
+  return x.strategy && x.strategy === "fixed" ? "manual" : null;
+}
+const popupTemplate = (context) => {
+  const elevationTag = context.tagFor(Elevation);
+  const buttonTag = context.tagFor(Button);
+  return html`
+  <${elevationTag}>
+		<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${ref("popupEl")} part="popup-base">
+			<div ${ref("controlEl")} class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
+				part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+				<div class="popup-content">
+					<slot></slot>
+					${when(
+    (x) => x.dismissible,
+    html`<${buttonTag} size="condensed" @click="${(x) => x.open = false}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${buttonTag}>`
+  )}
+				</div>
+				${when(
+    (x) => x.arrow,
+    html`<div class="arrow" ${ref("arrowEl")}></div>`
+  )}
+			</div>
+    </div>
+  </${elevationTag}>`;
+};
 
-const elevationDefinition = defineVividComponent(
-  "elevation",
-  Elevation,
-  elevationTemplate,
-  [],
+const popupDefinition = defineVividComponent(
+  "popup",
+  Popup,
+  popupTemplate,
+  [elevationDefinition, buttonDefinition],
   {
     styles
   }
 );
-const registerElevation = createRegisterFunction(elevationDefinition);
+const registerPopup = createRegisterFunction(popupDefinition);
 
-export { Elevation as E, elevationDefinition as e, registerElevation as r };
+export { Popup as P, PlacementStrategy as a, popupDefinition as p, registerPopup as r };