@vonage/vivid 5.8.0 → 5.9.0

package/lib/popover/popover.template.d.ts

@@ -0,0 +1,3 @@
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
+import { Popover } from './popover';
+export declare const popoverTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<Popover, any>;

package/lib/rich-text-editor/rte/config.d.ts

@@ -4,9 +4,12 @@ import { RteInstance, type RteInstanceOptions } from './instance';
 import { RteFeature, RteFeatureImpl } from './feature';
 import { TextblockAttrs } from './utils/textblock-attrs';
 import { TextblockMarks } from './utils/textblock-marks';
+import type { RteDocument } from './document';
+import { type RteView, type RteViewOptions } from './view';
 export declare class RteConfig {
     constructor(features: RteFeature[]);
     instantiateEditor(options?: RteInstanceOptions): RteInstance;
+    instantiateView(document: RteDocument, options?: RteViewOptions): RteView;
 }
 export declare class RteConfigImpl {
     schema: Schema;

package/lib/rich-text-editor/rte/document.d.ts

@@ -21,6 +21,8 @@ type RegularNode = {
     marks?: Mark[];
     content?: Array<RteNode>;
 };
+export type RteTextNode = TextNode;
+export type RteRegularNode = RegularNode;
 export type RteNode = TextNode | RegularNode;
 export type RteMark = Mark;
 export type RteDocument = Doc;

package/lib/rich-text-editor/rte/exports.d.ts

@@ -21,3 +21,4 @@ export { RteHtmlParser } from './html-parser';
 export { RteHtmlSerializer } from './html-serializer';
 export type { RteInstance } from './instance';
 export type { RteDocument, RteFragment, RteNode, RteMark } from './document';
+export type { RteView, RteViewOptions } from './view';

package/lib/rich-text-editor/rte/view.d.ts

@@ -0,0 +1,30 @@
+import type { RteConfig } from './config';
+import type { RteDocument, RteMark, RteNode } from './document';
+import { impl } from './utils/impl';
+export type RteView = ({
+    type: 'node';
+    node: RteDocument | RteNode;
+    children: RteView;
+} | {
+    type: 'mark';
+    mark: RteMark;
+    children: RteView;
+} | {
+    type: 'fragment';
+    content: RteView[];
+}) & {
+    [impl]: RteViewCtx;
+};
+export type RteViewCtx = {
+    config: RteConfig;
+    options: RteViewOptions;
+};
+export type RteViewOptions = {
+    renderChildView?: (view: RteView & {
+        type: 'node' | 'mark';
+    }) => {
+        dom: HTMLElement;
+        contentDom?: HTMLElement;
+    } | false;
+};
+export declare const convertToView: (doc: RteDocument, ctx: RteViewCtx) => RteView;

package/lib/rich-text-view/definition.d.ts

@@ -0,0 +1,4 @@
+import { RichTextView } from './rich-text-view';
+export declare const richTextViewDefinition: import("../../shared/design-system/defineVividComponent").VividComponentDefinition;
+export declare const registerRichTextView: (prefix?: string) => void;
+export { RichTextView as VwcRichTextViewElement };

package/lib/rich-text-view/rich-text-view.d.ts

@@ -0,0 +1,15 @@
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import type { RteView } from '../rich-text-editor/rte/view';
+export declare class RichTextView extends VividElement {
+    view?: RteView;
+    private _styles?;
+    private _addStyles;
+    private _removeStyles;
+    private _slotCounter;
+    private _slottedChildren;
+    private _cleanupLightDom;
+    private _updateView;
+    private _renderView;
+    private _handleCustomRender;
+    private _renderDefault;
+}

package/lib/rich-text-view/rich-text-view.template.d.ts

@@ -0,0 +1,3 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { RichTextView } from './rich-text-view';
+export declare const RichTextViewTemplate: () => ViewTemplate<RichTextView>;

package/lib/tag-name-map.d.ts

@@ -1,4 +1,4 @@
-import type { VwcAccordionElement, VwcAccordionItemElement, VwcActionGroupElement, VwcAlertElement, VwcAudioPlayerElement, VwcAvatarElement, VwcBadgeElement, VwcBannerElement, VwcBreadcrumbElement, VwcBreadcrumbItemElement, VwcButtonElement, VwcCalendarElement, VwcCalendarEventElement, VwcCardElement, VwcCheckboxElement, VwcColorPickerElement, VwcComboboxElement, VwcContextualHelpElement, VwcDataGridCellElement, VwcDataGridElement, VwcDataGridRowElement, VwcDatePickerElement, VwcDateRangePickerElement, VwcDateTimePickerElement, VwcDialogElement, VwcDialPadElement, VwcDividerElement, VwcEmptyStateElement, VwcFabElement, VwcFilePickerElement, VwcHeaderElement, VwcIconElement, VwcLayoutElement, VwcMenuElement, VwcMenuItemElement, VwcNavDisclosureElement, VwcNavElement, VwcNavItemElement, VwcNoteElement, VwcNumberFieldElement, VwcOptionElement, VwcPaginationElement, VwcProgressElement, VwcProgressRingElement, VwcRadioElement, VwcRadioGroupElement, VwcRangeSliderElement, VwcRichTextEditorElement, VwcSearchableSelectElement, VwcSelectableBoxElement, VwcSelectElement, VwcSideDrawerElement, VwcSimpleColorPickerElement, VwcSliderElement, VwcSplitButtonElement, VwcSwitchElement, VwcTabElement, VwcTabPanelElement, VwcTabsElement, VwcTagElement, VwcTagGroupElement, VwcTextAreaElement, VwcTextFieldElement, VwcTimePickerElement, VwcToggletipElement, VwcTooltipElement, VwcTreeItemElement, VwcTreeViewElement, VwcVideoPlayerElement } from './components';
+import type { VwcAccordionElement, VwcAccordionItemElement, VwcActionGroupElement, VwcAlertElement, VwcAudioPlayerElement, VwcAvatarElement, VwcBadgeElement, VwcBannerElement, VwcBreadcrumbElement, VwcBreadcrumbItemElement, VwcButtonElement, VwcCalendarElement, VwcCalendarEventElement, VwcCardElement, VwcCheckboxElement, VwcColorPickerElement, VwcComboboxElement, VwcContextualHelpElement, VwcDataGridCellElement, VwcDataGridElement, VwcDataGridRowElement, VwcDatePickerElement, VwcDateRangePickerElement, VwcDateTimePickerElement, VwcDialogElement, VwcDialPadElement, VwcDividerElement, VwcEmptyStateElement, VwcFabElement, VwcFilePickerElement, VwcHeaderElement, VwcIconElement, VwcLayoutElement, VwcMenuElement, VwcMenuItemElement, VwcNavDisclosureElement, VwcNavElement, VwcNavItemElement, VwcNoteElement, VwcNumberFieldElement, VwcOptionElement, VwcPaginationElement, VwcPopoverElement, VwcProgressElement, VwcProgressRingElement, VwcRadioElement, VwcRadioGroupElement, VwcRangeSliderElement, VwcRichTextEditorElement, VwcRichTextViewElement, VwcSearchableSelectElement, VwcSelectableBoxElement, VwcSelectElement, VwcSideDrawerElement, VwcSimpleColorPickerElement, VwcSliderElement, VwcSplitButtonElement, VwcSwitchElement, VwcTabElement, VwcTableBodyElement, VwcTableCellElement, VwcTableElement, VwcTableHeadElement, VwcTableHeaderCellElement, VwcTableRowElement, VwcTabPanelElement, VwcTabsElement, VwcTagElement, VwcTagGroupElement, VwcTextAreaElement, VwcTextFieldElement, VwcTimePickerElement, VwcToggletipElement, VwcTooltipElement, VwcTreeItemElement, VwcTreeViewElement, VwcVideoPlayerElement } from './components';
 type DefaultVividTagNameMap = {
     'vwc-accordion': VwcAccordionElement;
     'vwc-accordion-item': VwcAccordionItemElement;
@@ -21,6 +21,12 @@ type DefaultVividTagNameMap = {
     'vwc-data-grid-cell': VwcDataGridCellElement;
     'vwc-data-grid': VwcDataGridElement;
     'vwc-data-grid-row': VwcDataGridRowElement;
+    'vwc-table': VwcTableElement;
+    'vwc-table-body': VwcTableBodyElement;
+    'vwc-table-cell': VwcTableCellElement;
+    'vwc-table-head': VwcTableHeadElement;
+    'vwc-table-header-cell': VwcTableHeaderCellElement;
+    'vwc-table-row': VwcTableRowElement;
     'vwc-date-picker': VwcDatePickerElement;
     'vwc-date-range-picker': VwcDateRangePickerElement;
     'vwc-date-time-picker': VwcDateTimePickerElement;
@@ -42,11 +48,13 @@ type DefaultVividTagNameMap = {
     'vwc-number-field': VwcNumberFieldElement;
     'vwc-option': VwcOptionElement;
     'vwc-pagination': VwcPaginationElement;
+    'vwc-popover': VwcPopoverElement;
     'vwc-progress': VwcProgressElement;
     'vwc-progress-ring': VwcProgressRingElement;
     'vwc-radio': VwcRadioElement;
     'vwc-radio-group': VwcRadioGroupElement;
     'vwc-range-slider': VwcRangeSliderElement;
+    'vwc-rich-text-view': VwcRichTextViewElement;
     'vwc-rich-text-editor': VwcRichTextEditorElement;
     'vwc-searchable-select': VwcSearchableSelectElement;
     'vwc-selectable-box': VwcSelectableBoxElement;

package/locales/de-DE.cjs

@@ -328,6 +328,9 @@ const deDE = {
   dialog: {
     dismissButtonLabel: "Schließen"
   },
+  popover: {
+    dismissButtonLabel: "Schließen"
+  },
   banner: {
     dismissButtonLabel: "Schließen"
   },

package/locales/de-DE.js

@@ -326,6 +326,9 @@ const deDE = {
   dialog: {
     dismissButtonLabel: "Schließen"
   },
+  popover: {
+    dismissButtonLabel: "Schließen"
+  },
   banner: {
     dismissButtonLabel: "Schließen"
   },

package/locales/en-GB.cjs

@@ -160,6 +160,9 @@ const enGB = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },

package/locales/en-GB.js

@@ -158,6 +158,9 @@ const enGB = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },

package/locales/en-US.cjs

@@ -328,6 +328,9 @@ const enUS = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },

package/locales/en-US.js

@@ -326,6 +326,9 @@ const enUS = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },

package/locales/ja-JP.cjs

@@ -327,6 +327,9 @@ const jaJP = {
   dialog: {
     dismissButtonLabel: "閉じる"
   },
+  popover: {
+    dismissButtonLabel: "閉じる"
+  },
   banner: {
     dismissButtonLabel: "閉じる"
   },

package/locales/ja-JP.js

@@ -325,6 +325,9 @@ const jaJP = {
   dialog: {
     dismissButtonLabel: "閉じる"
   },
+  popover: {
+    dismissButtonLabel: "閉じる"
+  },
   banner: {
     dismissButtonLabel: "閉じる"
   },

package/locales/zh-CN.cjs

@@ -329,6 +329,9 @@ const zhCN = {
   dialog: {
     dismissButtonLabel: "关"
   },
+  popover: {
+    dismissButtonLabel: "关"
+  },
   banner: {
     dismissButtonLabel: "关"
   },

package/locales/zh-CN.js

@@ -327,6 +327,9 @@ const zhCN = {
   dialog: {
     dismissButtonLabel: "关"
   },
+  popover: {
+    dismissButtonLabel: "关"
+  },
   banner: {
     dismissButtonLabel: "关"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "homepage": "https://vivid.deno.dev",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -55,7 +55,8 @@
     "prosemirror-view": "^1.40.1",
     "ramda": "^0.32.0",
     "uuid": "^11.1.0",
-    "vanilla-colorful": "^0.7.2"
+    "vanilla-colorful": "^0.7.2",
+    "video.js": "^8.23.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
@@ -79,7 +80,6 @@
     "sass": "^1.94.2",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "video.js": "^8.23.4",
     "vite": "^5.4.18",
     "vite-plugin-dts": "~2.3.0",
     "vite-plugin-static-copy": "^1.0.6",
@@ -87,13 +87,13 @@
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
-    "@repo/consts": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
-    "@repo/eslint-plugin-repo": "1.0.0",
-    "@repo/eslint-config": "1.0.0",
+    "@repo/consts": "1.0.0",
     "@repo/shared": "1.0.0",
-    "@repo/stylelint-config": "1.0.0",
+    "@repo/eslint-config": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/tokens": "1.0.0",
+    "@repo/stylelint-config": "1.0.0",
     "@repo/styles": "1.0.0",
     "@repo/tools": "1.0.0",
     "@repo/typescript-config": "1.0.0",

package/popover/definition.cjs

@@ -0,0 +1,363 @@
+'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/definition.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()];
+    /* v8 ignore next -- @preserve */
+    let offsetValue = this.offset ?? 0;
+    if (this.arrow && this._arrowEl) {
+      offsetValue = 12;
+      middleware = [
+        ...middleware,
+        dom.arrow({ element: this._arrowEl, padding: 10 })
+      ];
+    }
+    /* v8 ignore else -- @preserve */
+    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() {
+    /* v8 ignore if -- @preserve */
+    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
+      }
+    );
+    /* 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([
+  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;