@vonage/vivid 3.32.0 → 3.35.0

package/shared/definition56.js

@@ -1,76 +1,47 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { T as TreeItem$1 } from './tree-item.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { I as Icon } from './icon.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { e as elements } from './node-observation.js';
-import { c as children } from './children.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) .icon {\n  color: var(--vvd-color-neutral-600);\n}";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Elevation extends FoundationElement {
+}
+__decorateClass([
+  attr
+], Elevation.prototype, "dp", 2);
+__decorateClass([
+  attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow", 2);
 
-class TreeItem extends TreeItem$1 {}
-__decorate([attr, __metadata("design:type", String)], TreeItem.prototype, "text", void 0);
-applyMixins(TreeItem, AffixIcon);
+const styles = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  position: relative;\n  isolation: isolate;\n}\n.control ::slotted(*)::before {\n  position: absolute;\n  z-index: -1;\n  background: var(--_elevation-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  content: \"\";\n  filter: var(--_elevation-shadow);\n  inline-size: 100%;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*)::before {\n  filter: none;\n}";
 
 const getClasses = ({
-  disabled,
-  selected
-}) => classNames('control', ['disabled', disabled], ['selected', Boolean(selected)]);
-const expandCollapseButton = context => {
-  const iconTag = context.tagFor(Icon);
-  return html`
-	<div aria-hidden="true"
-		class="expandCollapseButton"
-		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
-			${ref('expandCollapseButton')}
-	>
-		<${iconTag} class="expandCollapseIcon" name="${x => x.expanded ? 'chevron-down-line' : 'chevron-right-line'}"></${iconTag}>
-	</div>`;
-};
-const TreeItemTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
-  return html`
-	<template
-			role="treeitem"
-			slot="${x => x.isNestedItem() ? 'item' : void 0}"
-			tabindex="-1"
-			aria-expanded="${x => x.childItems && x.childItems.length > 0 ? x.expanded : void 0}"
-			aria-selected="${x => x.selected}"
-			aria-disabled="${x => x.disabled}"
-			@focusin="${(x, c) => x.handleFocus(c.event)}"
-			@focusout="${(x, c) => x.handleBlur(c.event)}"
-			${children({
-    property: 'childItems',
-    filter: elements()
-  })}
-			>
-			<div class="${getClasses}">
-				${() => focusTemplate}
-				${when(x => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
-				${x => affixIconTemplate(x.icon)}
-				${x => x.text}
-			</div>
-			${when(x => x.childItems && x.childItems.length > 0 && x.expanded, html`
-				<div role="group" class="items">
-					<slot name="item" ${slotted('items')}></slot>
-				</div>`)}
-		</template>`;
-};
+  dp,
+  noShadow
+}) => classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)]
+);
+const elevationTemplate = () => html`
+        <div class="${getClasses}" part="base">
+			<slot></slot>
+		</div>`;
 
-const treeItemDefinition = TreeItem.compose({
-  baseName: 'tree-item',
-  template: TreeItemTemplate,
-  styles: css_248z
+const elevationDefinition = Elevation.compose({
+  baseName: "elevation",
+  template: elevationTemplate,
+  styles
 });
-const treeItemRegistries = [treeItemDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTreeItem = registerFactory(treeItemRegistries);
+const elevationRegistries = [elevationDefinition()];
+const registerElevation = registerFactory(elevationRegistries);
 
-export { treeItemRegistries as a, registerTreeItem as r, treeItemDefinition as t };
+export { Elevation as E, elevationRegistries as e, registerElevation as r };

package/shared/definition57.js

@@ -1,303 +1,181 @@
-import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { T as TreeItem, i as isTreeItemElement } from './tree-item.js';
-import { i as isHTMLElement, g as getDisplayedNodes } from './dom.js';
-import { d as keyEnter, c as keyArrowUp, b as keyArrowDown, h as keyArrowRight, i as keyArrowLeft, k as keyEnd, a as keyHome } from './key-codes.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { B as Button, a as buttonRegistries } from './definition10.js';
+import { E as Elevation, e as elevationRegistries } from './definition56.js';
 import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * A Tree view Custom HTML Element.
- * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
- *
- * @slot - The default slot for tree items
- *
- * @public
- */
-class TreeView$1 extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The tree item that is designated to be in the tab queue.
-         *
-         * @internal
-         */
-        this.currentFocused = null;
-        /**
-         * Handle focus events
-         *
-         * @internal
-         */
-        this.handleFocus = (e) => {
-            if (this.slottedTreeItems.length < 1) {
-                // no child items, nothing to do
-                return;
-            }
-            if (e.target === this) {
-                if (this.currentFocused === null) {
-                    this.currentFocused = this.getValidFocusableItem();
-                }
-                if (this.currentFocused !== null) {
-                    TreeItem.focusItem(this.currentFocused);
-                }
-                return;
-            }
-            if (this.contains(e.target)) {
-                this.setAttribute("tabindex", "-1");
-                this.currentFocused = e.target;
-            }
-        };
-        /**
-         * Handle blur events
-         *
-         * @internal
-         */
-        this.handleBlur = (e) => {
-            if (e.target instanceof HTMLElement &&
-                (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-                this.setAttribute("tabindex", "0");
-            }
-        };
-        /**
-         * KeyDown handler
-         *
-         *  @internal
-         */
-        this.handleKeyDown = (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            if (this.slottedTreeItems.length < 1) {
-                return true;
-            }
-            const treeItems = this.getVisibleNodes();
-            switch (e.key) {
-                case keyHome:
-                    if (treeItems.length) {
-                        TreeItem.focusItem(treeItems[0]);
-                    }
-                    return;
-                case keyEnd:
-                    if (treeItems.length) {
-                        TreeItem.focusItem(treeItems[treeItems.length - 1]);
-                    }
-                    return;
-                case keyArrowLeft:
-                    if (e.target && this.isFocusableElement(e.target)) {
-                        const item = e.target;
-                        if (item instanceof TreeItem &&
-                            item.childItemLength() > 0 &&
-                            item.expanded) {
-                            item.expanded = false;
-                        }
-                        else if (item instanceof TreeItem &&
-                            item.parentElement instanceof TreeItem) {
-                            TreeItem.focusItem(item.parentElement);
-                        }
-                    }
-                    return false;
-                case keyArrowRight:
-                    if (e.target && this.isFocusableElement(e.target)) {
-                        const item = e.target;
-                        if (item instanceof TreeItem &&
-                            item.childItemLength() > 0 &&
-                            !item.expanded) {
-                            item.expanded = true;
-                        }
-                        else if (item instanceof TreeItem && item.childItemLength() > 0) {
-                            this.focusNextNode(1, e.target);
-                        }
-                    }
-                    return;
-                case keyArrowDown:
-                    if (e.target && this.isFocusableElement(e.target)) {
-                        this.focusNextNode(1, e.target);
-                    }
-                    return;
-                case keyArrowUp:
-                    if (e.target && this.isFocusableElement(e.target)) {
-                        this.focusNextNode(-1, e.target);
-                    }
-                    return;
-                case keyEnter:
-                    // In single-select trees where selection does not follow focus (see note below),
-                    // the default action is typically to select the focused node.
-                    this.handleClick(e);
-                    return;
-            }
-            // don't prevent default if we took no action
-            return true;
-        };
-        /**
-         * Handles the selected-changed events bubbling up
-         * from child tree items
-         *
-         *  @internal
-         */
-        this.handleSelectedChange = (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
-                return true;
-            }
-            const item = e.target;
-            if (item.selected) {
-                if (this.currentSelected && this.currentSelected !== item) {
-                    this.currentSelected.selected = false;
-                }
-                // new selected item
-                this.currentSelected = item;
-            }
-            else if (!item.selected && this.currentSelected === item) {
-                // selected item deselected
-                this.currentSelected = null;
-            }
-            return;
-        };
-        /**
-         * Updates the tree view when slottedTreeItems changes
-         */
-        this.setItems = () => {
-            // force single selection
-            // defaults to first one found
-            const selectedItem = this.treeView.querySelector("[aria-selected='true']");
-            this.currentSelected = selectedItem;
-            // invalidate the current focused item if it is no longer valid
-            if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-                this.currentFocused = this.getValidFocusableItem();
-            }
-            // toggle properties on child elements
-            this.nested = this.checkForNestedItems();
-            const treeItems = this.getVisibleNodes();
-            treeItems.forEach(node => {
-                if (isTreeItemElement(node)) {
-                    node.nested = this.nested;
-                }
-            });
-        };
-        /**
-         * check if the item is focusable
-         */
-        this.isFocusableElement = (el) => {
-            return isTreeItemElement(el);
-        };
-        this.isSelectedElement = (el) => {
-            return el.selected;
-        };
-    }
-    slottedTreeItemsChanged() {
-        if (this.$fastController.isConnected) {
-            // update for slotted children change
-            this.setItems();
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute("tabindex", "0");
-        DOM.queueUpdate(() => {
-            this.setItems();
-        });
-    }
-    /**
-     * Handles click events bubbling up
-     *
-     *  @internal
-     */
-    handleClick(e) {
-        if (e.defaultPrevented) {
-            // handled, do nothing
-            return;
-        }
-        if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
-            // not a tree item, ignore
-            return true;
-        }
-        const item = e.target;
-        if (!item.disabled) {
-            item.selected = !item.selected;
-        }
-        return;
-    }
-    /**
-     * Move focus to a tree item based on its offset from the provided item
-     */
-    focusNextNode(delta, item) {
-        const visibleNodes = this.getVisibleNodes();
-        if (!visibleNodes) {
-            return;
-        }
-        const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-        if (isHTMLElement(focusItem)) {
-            TreeItem.focusItem(focusItem);
-        }
+function t(t){return t.split("-")[1]}function e(t){return "y"===t?"height":"width"}function n$1(t){return t.split("-")[0]}function o$1(t){return ["top","bottom"].includes(n$1(t))?"x":"y"}function i$1(i,r,a){let{reference:l,floating:s}=i;const c=l.x+l.width/2-s.width/2,f=l.y+l.height/2-s.height/2,m=o$1(r),u=e(m),g=l[u]/2-s[u]/2,d="x"===m;let p;switch(n$1(r)){case"top":p={x:c,y:l.y-s.height};break;case"bottom":p={x:c,y:l.y+l.height};break;case"right":p={x:l.x+l.width,y:f};break;case"left":p={x:l.x-s.width,y:f};break;default:p={x:l.x,y:l.y};}switch(t(r)){case"start":p[m]-=g*(a&&d?-1:1);break;case"end":p[m]+=g*(a&&d?-1:1);}return p}const r$1=async(t,e,n)=>{const{placement:o="bottom",strategy:r="absolute",middleware:a=[],platform:l}=n,s=a.filter(Boolean),c=await(null==l.isRTL?void 0:l.isRTL(e));let f=await l.getElementRects({reference:t,floating:e,strategy:r}),{x:m,y:u}=i$1(f,o,c),g=o,d={},p=0;for(let n=0;n<s.length;n++){const{name:a,fn:h}=s[n],{x:y,y:x,data:w,reset:v}=await h({x:m,y:u,initialPlacement:o,placement:g,strategy:r,middlewareData:d,rects:f,platform:l,elements:{reference:t,floating:e}});m=null!=y?y:m,u=null!=x?x:u,d={...d,[a]:{...d[a],...w}},v&&p<=50&&(p++,"object"==typeof v&&(v.placement&&(g=v.placement),v.rects&&(f=!0===v.rects?await l.getElementRects({reference:t,floating:e,strategy:r}):v.rects),({x:m,y:u}=i$1(f,g,c))),n=-1);}return {x:m,y:u,placement:g,strategy:r,middlewareData:d}};function a$1(t,e){return "function"==typeof t?t(e):t}function l$1(t){return "number"!=typeof t?function(t){return {top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function s$1(t){return {...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function c$1(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:c,elements:f,strategy:m}=t,{boundary:u="clippingAncestors",rootBoundary:g="viewport",elementContext:d="floating",altBoundary:p=!1,padding:h=0}=a$1(e,t),y=l$1(h),x=f[p?"floating"===d?"reference":"floating":d],w=s$1(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(x)))||n?x:x.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(f.floating)),boundary:u,rootBoundary:g,strategy:m})),v="floating"===d?{...c.floating,x:o,y:i}:c.reference,b=await(null==r.getOffsetParent?void 0:r.getOffsetParent(f.floating)),A=await(null==r.isElement?void 0:r.isElement(b))&&await(null==r.getScale?void 0:r.getScale(b))||{x:1,y:1},R=s$1(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({rect:v,offsetParent:b,strategy:m}):v);return {top:(w.top-R.top+y.top)/A.y,bottom:(R.bottom-w.bottom+y.bottom)/A.y,left:(w.left-R.left+y.left)/A.x,right:(R.right-w.right+y.right)/A.x}}const f$1=Math.min,m$1=Math.max;function u$1(t,e,n){return m$1(t,f$1(e,n))}const g$1=n=>({name:"arrow",options:n,async fn(i){const{x:r,y:s,placement:c,rects:m,platform:g,elements:d}=i,{element:p,padding:h=0}=a$1(n,i)||{};if(null==p)return {};const y=l$1(h),x={x:r,y:s},w=o$1(c),v=e(w),b=await g.getDimensions(p),A="y"===w,R=A?"top":"left",P=A?"bottom":"right",E=A?"clientHeight":"clientWidth",T=m.reference[v]+m.reference[w]-x[w]-m.floating[v],D=x[w]-m.reference[w],L=await(null==g.getOffsetParent?void 0:g.getOffsetParent(p));let k=L?L[E]:0;k&&await(null==g.isElement?void 0:g.isElement(L))||(k=d.floating[E]||m.floating[v]);const O=T/2-D/2,B=k/2-b[v]/2-1,C=f$1(y[R],B),H=f$1(y[P],B),S=C,F=k-b[v]-H,M=k/2-b[v]/2+O,V=u$1(S,M,F),W=null!=t(c)&&M!=V&&m.reference[v]/2-(M<S?C:H)-b[v]/2<0?M<S?S-M:F-M:0;return {[w]:x[w]-W,data:{[w]:V,centerOffset:M-V+W}}}}),d$1=["top","right","bottom","left"];d$1.reduce(((t,e)=>t.concat(e,e+"-start",e+"-end")),[]);const h$1={left:"right",right:"left",bottom:"top",top:"bottom"};function y$1(t){return t.replace(/left|right|bottom|top/g,(t=>h$1[t]))}function x$1(n,i,r){void 0===r&&(r=!1);const a=t(n),l=o$1(n),s=e(l);let c="x"===l?a===(r?"end":"start")?"right":"left":"start"===a?"bottom":"top";return i.reference[s]>i.floating[s]&&(c=y$1(c)),{main:c,cross:y$1(c)}}const w$1={start:"end",end:"start"};function v$1(t){return t.replace(/start|end/g,(t=>w$1[t]))}const A$1=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(o){var i;const{placement:r,middlewareData:l,rects:s,initialPlacement:f,platform:m,elements:u}=o,{mainAxis:g=!0,crossAxis:d=!0,fallbackPlacements:p,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:w="none",flipAlignment:b=!0,...A}=a$1(e,o),R=n$1(r),P=n$1(f)===f,E=await(null==m.isRTL?void 0:m.isRTL(u.floating)),T=p||(P||!b?[y$1(f)]:function(t){const e=y$1(t);return [v$1(t),e,v$1(e)]}(f));p||"none"===w||T.push(...function(e,o,i,r){const a=t(e);let l=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],a=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:a;default:return []}}(n$1(e),"start"===i,r);return a&&(l=l.map((t=>t+"-"+a)),o&&(l=l.concat(l.map(v$1)))),l}(f,b,w,E));const D=[f,...T],L=await c$1(o,A),k=[];let O=(null==(i=l.flip)?void 0:i.overflows)||[];if(g&&k.push(L[R]),d){const{main:t,cross:e}=x$1(r,s,E);k.push(L[t],L[e]);}if(O=[...O,{placement:r,overflows:k}],!k.every((t=>t<=0))){var B,C;const t=((null==(B=l.flip)?void 0:B.index)||0)+1,e=D[t];if(e)return {data:{index:t,overflows:O},reset:{placement:e}};let n=null==(C=O.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:C.placement;if(!n)switch(h){case"bestFit":{var H;const t=null==(H=O.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:H[0];t&&(n=t);break}case"initialPlacement":n=f;}if(r!==n)return {reset:{placement:n}}}return {}}}};function R$1(t,e){return {top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function P$1(t){return d$1.some((e=>t[e]>=0))}const E$1=function(t){return void 0===t&&(t={}),{name:"hide",options:t,async fn(e){const{rects:n}=e,{strategy:o="referenceHidden",...i}=a$1(t,e);switch(o){case"referenceHidden":{const t=R$1(await c$1(e,{...i,elementContext:"reference"}),n.reference);return {data:{referenceHiddenOffsets:t,referenceHidden:P$1(t)}}}case"escaped":{const t=R$1(await c$1(e,{...i,altBoundary:!0}),n.floating);return {data:{escapedOffsets:t,escaped:P$1(t)}}}default:return {}}}}};function T$1(t){const e=f$1(...t.map((t=>t.left))),n=f$1(...t.map((t=>t.top)));return {x:e,y:n,width:m$1(...t.map((t=>t.right)))-e,height:m$1(...t.map((t=>t.bottom)))-n}}const D$1=function(t){return void 0===t&&(t={}),{name:"inline",options:t,async fn(e){const{placement:i,elements:r,rects:c,platform:u,strategy:g}=e,{padding:d=2,x:p,y:h}=a$1(t,e),y=Array.from(await(null==u.getClientRects?void 0:u.getClientRects(r.reference))||[]),x=function(t){const e=t.slice().sort(((t,e)=>t.y-e.y)),n=[];let o=null;for(let t=0;t<e.length;t++){const i=e[t];!o||i.y-o.y>o.height/2?n.push([i]):n[n.length-1].push(i),o=i;}return n.map((t=>s$1(T$1(t))))}(y),w=s$1(T$1(y)),v=l$1(d);const b=await u.getElementRects({reference:{getBoundingClientRect:function(){if(2===x.length&&x[0].left>x[1].right&&null!=p&&null!=h)return x.find((t=>p>t.left-v.left&&p<t.right+v.right&&h>t.top-v.top&&h<t.bottom+v.bottom))||w;if(x.length>=2){if("x"===o$1(i)){const t=x[0],e=x[x.length-1],o="top"===n$1(i),r=t.top,a=e.bottom,l=o?t.left:e.left,s=o?t.right:e.right;return {top:r,bottom:a,left:l,right:s,width:s-l,height:a-r,x:l,y:r}}const t="left"===n$1(i),e=m$1(...x.map((t=>t.right))),r=f$1(...x.map((t=>t.left))),a=x.filter((n=>t?n.left===r:n.right===e)),l=a[0].top,s=a[a.length-1].bottom;return {top:l,bottom:s,left:r,right:e,width:e-r,height:s-l,x:r,y:l}}return w}},floating:r.floating,strategy:g});return c.reference.x!==b.reference.x||c.reference.y!==b.reference.y||c.reference.width!==b.reference.width||c.reference.height!==b.reference.height?{reset:{rects:b}}:{}}}};const L$1=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(i){const{x:r,y:l}=i,s=await async function(e,i){const{placement:r,platform:l,elements:s}=e,c=await(null==l.isRTL?void 0:l.isRTL(s.floating)),f=n$1(r),m=t(r),u="x"===o$1(r),g=["left","top"].includes(f)?-1:1,d=c&&u?-1:1,p=a$1(i,e);let{mainAxis:h,crossAxis:y,alignmentAxis:x}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return m&&"number"==typeof x&&(y="end"===m?-1*x:x),u?{x:y*d,y:h*g}:{x:h*g,y:y*d}}(i,e);return {x:r+s.x,y:l+s.y,data:s}}}};
+
+function n(t){var e;return (null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function o(t){return n(t).getComputedStyle(t)}function i(t){return t instanceof n(t).Node}function r(t){return i(t)?(t.nodeName||"").toLowerCase():"#document"}function c(t){return t instanceof HTMLElement||t instanceof n(t).HTMLElement}function l(t){return "undefined"!=typeof ShadowRoot&&(t instanceof n(t).ShadowRoot||t instanceof ShadowRoot)}function s(t){const{overflow:e,overflowX:n,overflowY:i,display:r}=o(t);return /auto|scroll|overlay|hidden|clip/.test(e+i+n)&&!["inline","contents"].includes(r)}function f(t){return ["table","td","th"].includes(r(t))}function u(t){const e=a(),n=o(t);return "none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function a(){return !("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function d(t){return ["html","body","#document"].includes(r(t))}const h=Math.min,p=Math.max,m=Math.round,g=Math.floor,y=t=>({x:t,y:t});function w(t){const e=o(t);let n=parseFloat(e.width)||0,i=parseFloat(e.height)||0;const r=c(t),l=r?t.offsetWidth:n,s=r?t.offsetHeight:i,f=m(n)!==l||m(i)!==s;return f&&(n=l,i=s),{width:n,height:i,$:f}}function x(t){return t instanceof Element||t instanceof n(t).Element}function v(t){return x(t)?t:t.contextElement}function b(t){const e=v(t);if(!c(e))return y(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=w(e);let l=(r?m(n.width):n.width)/o,s=(r?m(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),s&&Number.isFinite(s)||(s=1),{x:l,y:s}}const L=y(0);function T(t){const e=n(t);return a()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:L}function R(e,o,i,r){void 0===o&&(o=!1),void 0===i&&(i=!1);const c=e.getBoundingClientRect(),l=v(e);let s=y(1);o&&(r?x(r)&&(s=b(r)):s=b(e));const f=function(t,e,o){return void 0===e&&(e=!1),!(!o||e&&o!==n(t))&&e}(l,i,r)?T(l):y(0);let u=(c.left+f.x)/s.x,a=(c.top+f.y)/s.y,d=c.width/s.x,h=c.height/s.y;if(l){const t=n(l),e=r&&x(r)?n(r):r;let o=t.frameElement;for(;o&&r&&e!==t;){const t=b(o),e=o.getBoundingClientRect(),i=getComputedStyle(o),r=e.left+(o.clientLeft+parseFloat(i.paddingLeft))*t.x,c=e.top+(o.clientTop+parseFloat(i.paddingTop))*t.y;u*=t.x,a*=t.y,d*=t.x,h*=t.y,u+=r,a+=c,o=n(o).frameElement;}}return s$1({width:d,height:h,x:u,y:a})}function E(t){return x(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function S(t){var e;return null==(e=(i(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function C(t){return R(S(t)).left+E(t).scrollLeft}function F(t){if("html"===r(t))return t;const e=t.assignedSlot||t.parentNode||l(t)&&t.host||S(t);return l(e)?e.host:e}function O(t){const e=F(t);return d(e)?t.ownerDocument?t.ownerDocument.body:t.body:c(e)&&s(e)?e:O(e)}function D(t,e){var o;void 0===e&&(e=[]);const i=O(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),c=n(i);return r?e.concat(c,c.visualViewport||[],s(i)?i:[]):e.concat(i,D(i))}function H(e,i,r){let l;if("viewport"===i)l=function(t,e){const o=n(t),i=S(t),r=o.visualViewport;let c=i.clientWidth,l=i.clientHeight,s=0,f=0;if(r){c=r.width,l=r.height;const t=a();(!t||t&&"fixed"===e)&&(s=r.offsetLeft,f=r.offsetTop);}return {width:c,height:l,x:s,y:f}}(e,r);else if("document"===i)l=function(t){const e=S(t),n=E(t),i=t.ownerDocument.body,r=p(e.scrollWidth,e.clientWidth,i.scrollWidth,i.clientWidth),c=p(e.scrollHeight,e.clientHeight,i.scrollHeight,i.clientHeight);let l=-n.scrollLeft+C(t);const s=-n.scrollTop;return "rtl"===o(i).direction&&(l+=p(e.clientWidth,i.clientWidth)-r),{width:r,height:c,x:l,y:s}}(S(e));else if(x(i))l=function(t,e){const n=R(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=c(t)?b(t):y(1);return {width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(i,r);else {const t=T(e);l={...i,x:i.x-t.x,y:i.y-t.y};}return s$1(l)}function W(t,e){const n=F(t);return !(n===e||!x(n)||d(n))&&("fixed"===o(n).position||W(n,e))}function M(t,e,n){const o=c(e),i=S(e),l="fixed"===n,f=R(t,!0,l,e);let u={scrollLeft:0,scrollTop:0};const a=y(0);if(o||!o&&!l)if(("body"!==r(e)||s(i))&&(u=E(e)),c(e)){const t=R(e,!0,l,e);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop;}else i&&(a.x=C(i));return {x:f.left+u.scrollLeft-a.x,y:f.top+u.scrollTop-a.y,width:f.width,height:f.height}}function z(t,e){return c(t)&&"fixed"!==o(t).position?e?e(t):t.offsetParent:null}function P(t,e){const i=n(t);if(!c(t))return i;let l=z(t,e);for(;l&&f(l)&&"static"===o(l).position;)l=z(l,e);return l&&("html"===r(l)||"body"===r(l)&&"static"===o(l).position&&!u(l))?i:l||function(t){let e=F(t);for(;c(e)&&!d(e);){if(u(e))return e;e=F(e);}return null}(t)||i}const V={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=c(n),l=S(n);if(n===l)return e;let f={scrollLeft:0,scrollTop:0},u=y(1);const a=y(0);if((i||!i&&"fixed"!==o)&&(("body"!==r(n)||s(l))&&(f=E(n)),c(n))){const t=R(n);u=b(n),a.x=t.x+n.clientLeft,a.y=t.y+n.clientTop;}return {width:e.width*u.x,height:e.height*u.y,x:e.x*u.x-f.scrollLeft*u.x+a.x,y:e.y*u.y-f.scrollTop*u.y+a.y}},getDocumentElement:S,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:i,strategy:c}=t;const l=[..."clippingAncestors"===n?function(t,e){const n=e.get(t);if(n)return n;let i=D(t).filter((t=>x(t)&&"body"!==r(t))),c=null;const l="fixed"===o(t).position;let f=l?F(t):t;for(;x(f)&&!d(f);){const e=o(f),n=u(f);n||"fixed"!==e.position||(c=null),(l?!n&&!c:!n&&"static"===e.position&&c&&["absolute","fixed"].includes(c.position)||s(f)&&!n&&W(t,f))?i=i.filter((t=>t!==f)):c=e,f=F(f);}return e.set(t,i),i}(e,this._c):[].concat(n),i],f=l[0],a=l.reduce(((t,n)=>{const o=H(e,n,c);return t.top=p(o.top,t.top),t.right=h(o.right,t.right),t.bottom=h(o.bottom,t.bottom),t.left=p(o.left,t.left),t}),H(e,f,c));return {width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:P,getElementRects:async function(t){let{reference:e,floating:n,strategy:o}=t;const i=this.getOffsetParent||P,r=this.getDimensions;return {reference:M(e,await i(n),o),floating:{x:0,y:0,...await r(n)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){return w(t)},getScale:b,isElement:x,isRTL:function(t){return "rtl"===getComputedStyle(t).direction}};function A(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:c="function"==typeof ResizeObserver,layoutShift:l="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=v(t),u=i||r?[...f?D(f):[],...D(e)]:[];u.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n);}));const a=f&&l?function(t,e){let n,o=null;const i=S(t);function r(){clearTimeout(n),o&&o.disconnect(),o=null;}return function c(l,s){void 0===l&&(l=!1),void 0===s&&(s=1),r();const{left:f,top:u,width:a,height:d}=t.getBoundingClientRect();if(l||e(),!a||!d)return;const m={rootMargin:-g(u)+"px "+-g(i.clientWidth-(f+a))+"px "+-g(i.clientHeight-(u+d))+"px "+-g(f)+"px",threshold:p(0,h(1,s))||1};let y=!0;function w(t){const e=t[0].intersectionRatio;if(e!==s){if(!y)return c();e?c(!1,e):n=setTimeout((()=>{c(!1,1e-7);}),100);}y=!1;}try{o=new IntersectionObserver(w,{...m,root:i.ownerDocument});}catch(t){o=new IntersectionObserver(w,m);}o.observe(t);}(!0),r}(f,n):null;let d,m=-1,y=null;c&&(y=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&y&&(y.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame((()=>{y&&y.observe(e);}))),n();})),f&&!s&&y.observe(f),y.observe(e));let w=s?R(t):null;return s&&function e(){const o=R(t);!w||o.x===w.x&&o.y===w.y&&o.width===w.width&&o.height===w.height||n();w=o,d=requestAnimationFrame(e);}(),n(),()=>{u.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n);})),a&&a(),y&&y.disconnect(),y=null,s&&cancelAnimationFrame(d);}}const B=(t,n,o)=>{const i=new Map,r={platform:V,...o},c={...r.platform,_c:i};return r$1(t,n,{...r,platform:c})};
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Popup extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.dismissible = false;
+    this.arrow = false;
+    this.alternate = false;
+    this.strategy = "fixed";
+  }
+  get #middleware() {
+    let middleware = [D$1(), A$1(), E$1()];
+    if (this.arrow) {
+      middleware = [L$1(12), ...middleware, g$1({ element: this.arrowEl, padding: 10 })];
     }
-    /**
-     * checks if there are any nested tree items
-     */
-    getValidFocusableItem() {
-        const treeItems = this.getVisibleNodes();
-        // default to selected element if there is one
-        let focusIndex = treeItems.findIndex(this.isSelectedElement);
-        if (focusIndex === -1) {
-            // otherwise first focusable tree item
-            focusIndex = treeItems.findIndex(this.isFocusableElement);
-        }
-        if (focusIndex !== -1) {
-            return treeItems[focusIndex];
-        }
-        return null;
+    return middleware;
+  }
+  #cleanup;
+  openChanged(_, newValue) {
+    newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#cleanup?.();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    this.#cleanup?.();
+    if (this.anchorEl && this.popupEl) {
+      this.#cleanup = A(this.anchorEl, this.popupEl, () => this.updatePosition());
     }
-    /**
-     * checks if there are any nested tree items
-     */
-    checkForNestedItems() {
-        return this.slottedTreeItems.some((node) => {
-            return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
-        });
+  }
+  /**
+   * Updates popup's position
+   *
+   * @public
+   */
+  async updatePosition() {
+    if (!this.open || !this.anchorEl) {
+      return;
     }
-    getVisibleNodes() {
-        return getDisplayedNodes(this, "[role='treeitem']") || [];
+    const positionData = await B(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]
+    });
+  }
+  /**
+   * Gets the anchor element by id
+   */
+  get anchorEl() {
+    return this.anchor instanceof HTMLElement ? this.anchor : document.getElementById(this.anchor ? this.anchor : "");
+  }
+  show() {
+    this.open = true;
+  }
+  hide() {
+    this.open = false;
+  }
 }
-__decorate([
-    attr({ attribute: "render-collapsed-nodes" })
-], TreeView$1.prototype, "renderCollapsedNodes", void 0);
-__decorate([
-    observable
-], TreeView$1.prototype, "currentSelected", void 0);
-__decorate([
-    observable
-], TreeView$1.prototype, "slottedTreeItems", void 0);
-
-var css_248z = ".control {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}";
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "open", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "dismissible", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "arrow", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Popup.prototype, "alternate", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Popup.prototype, "placement", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Popup.prototype, "strategy", 2);
+__decorateClass([
+  attr
+], Popup.prototype, "anchor", 2);
 
-class TreeView extends TreeView$1 {}
+const styles = ".control {\n  background: var(--vvd-color-surface-4dp);\n  border-radius: inherit;\n  contain: layout;\n}\n.control:not(.open) {\n  display: none;\n}\n\n.popup-wrapper {\n  z-index: 10;\n  border-radius: 6px;\n  inline-size: fit-content;\n}\n.popup-wrapper:not(.absolute) {\n  position: fixed;\n}\n.popup-wrapper.absolute {\n  position: absolute;\n}\n\n.popup-content {\n  display: grid;\n  color: var(--vvd-color-canvas-text); /* neutral-100 */\n}\n.dismissible .popup-content {\n  align-content: start;\n  grid-template-columns: 1fr auto;\n}\n\n.arrow {\n  position: absolute;\n  z-index: -1;\n  width: 8px;\n  height: 8px;\n  background: var(--vvd-color-surface-4dp);\n  transform: rotate(45deg);\n}\n\n.dismissible-button {\n  align-self: flex-start;\n  margin-block-start: 4px;\n  margin-inline-end: 4px;\n}";
 
-const getClasses = _ => classNames('control');
-const TreeViewTemplate = () => {
+const getClasses = ({
+  open,
+  dismissible,
+  alternate
+}) => classNames(
+  "control",
+  ["open", Boolean(open)],
+  ["dismissible", Boolean(dismissible)],
+  ["alternate", Boolean(alternate)]
+);
+const popupTemplate = (context) => {
+  const elevationTag = context.tagFor(Elevation);
+  const buttonTag = context.tagFor(Button);
   return html`
-	<template
-		role="tree"
-		${ref('treeView')}
-		@keydown="${(x, c) => x.handleKeyDown(c.event)}"
-		@focusin="${(x, c) => x.handleFocus(c.event)}"
-		@focusout="${(x, c) => x.handleBlur(c.event)}"
-		@click="${(x, c) => x.handleClick(c.event)}"
-		@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
-		>
-		<div class="${getClasses}">
-			<slot ${slotted('slottedTreeItems')}></slot>
-		</div>
-	</template>`;
+  <${elevationTag}>
+	  <div class="popup-wrapper ${(x) => x.strategy}" ${ref("popupEl")} part="popup-base">
+			<div 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 treeViewDefinition = TreeView.compose({
-  baseName: 'tree-view',
-  template: TreeViewTemplate,
-  styles: css_248z
+const popupDefinition = Popup.compose({
+  baseName: "popup",
+  template: popupTemplate,
+  styles
 });
-const treeViewRegistries = [treeViewDefinition()];
-const registerTreeView = registerFactory(treeViewRegistries);
+const popupRegistries = [popupDefinition(), ...elevationRegistries, ...buttonRegistries];
+const registerPopup = registerFactory(popupRegistries);
 
-export { treeViewRegistries as a, registerTreeView as r, treeViewDefinition as t };
+export { Popup as P, popupRegistries as p, registerPopup as r };