@vonage/vivid 3.36.0 → 3.38.0

package/shared/definition55.js

@@ -1,17 +1,306 @@
-import { h as html, r as registerFactory } from './index.js';
-import { F as Focus } from './focus.js';
+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$1, i as isTreeItemElement } from './tree-item.js';
+import { i as isHTMLElement, g as getDisplayedNodes } from './dom.js';
+import { k as keyEnter, e as keyArrowUp, d as keyArrowDown, h as keyArrowRight, i as keyArrowLeft, b as keyEnd, c as keyHome } from './key-codes.js';
+import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
+import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 13 Sep 2023 10:58:27 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+/**
+ * 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
+ */
+let TreeView$1 = class TreeView 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$1.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$1.focusItem(treeItems[0]);
+                    }
+                    return;
+                case keyEnd:
+                    if (treeItems.length) {
+                        TreeItem$1.focusItem(treeItems[treeItems.length - 1]);
+                    }
+                    return;
+                case keyArrowLeft:
+                    if (e.target && this.isFocusableElement(e.target)) {
+                        const item = e.target;
+                        if (item instanceof TreeItem$1 &&
+                            item.childItemLength() > 0 &&
+                            item.expanded) {
+                            item.expanded = false;
+                        }
+                        else if (item instanceof TreeItem$1 &&
+                            item.parentElement instanceof TreeItem$1) {
+                            TreeItem$1.focusItem(item.parentElement);
+                        }
+                    }
+                    return false;
+                case keyArrowRight:
+                    if (e.target && this.isFocusableElement(e.target)) {
+                        const item = e.target;
+                        if (item instanceof TreeItem$1 &&
+                            item.childItemLength() > 0 &&
+                            !item.expanded) {
+                            item.expanded = true;
+                        }
+                        else if (item instanceof TreeItem$1 && 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$1.focusItem(focusItem);
+        }
+    }
+    /**
+     * 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;
+    }
+    /**
+     * checks if there are any nested tree items
+     */
+    checkForNestedItems() {
+        return this.slottedTreeItems.some((node) => {
+            return isTreeItemElement(node) && node.querySelector("[role='treeitem']");
+        });
+    }
+    getVisibleNodes() {
+        return getDisplayedNodes(this, "[role='treeitem']") || [];
+    }
+};
+__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);
 
-const focusTemplate = () => html`
-        <span class="control"></span>`;
+const styles = ".control {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}";
 
-const focusDefinition = Focus.compose({
-  baseName: "focus",
-  template: focusTemplate,
-  styles
-});
-const focusRegistries = [focusDefinition()];
-const registerFocus = registerFactory(focusRegistries);
+class TreeView extends TreeView$1 {
+}
 
-export { focusRegistries as f, registerFocus as r };
+const getClasses = (_) => classNames("control");
+const TreeViewTemplate = () => {
+  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>`;
+};
+
+const treeViewDefinition = TreeView.compose(
+  {
+    baseName: "tree-view",
+    template: TreeViewTemplate,
+    styles
+  }
+);
+const treeViewRegistries = [treeViewDefinition()];
+const registerTreeView = registerFactory(treeViewRegistries);
+
+export { treeViewRegistries as a, registerTreeView as r, treeViewDefinition as t };

package/shared/definition56.js

@@ -1,47 +1,17 @@
-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 { h as html, r as registerFactory } from './index.js';
+import { F as Focus } from './focus.js';
 
-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);
+const styles = "/**\n * Do not edit directly\n * Generated on Fri, 13 Oct 2023 14:45:50 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
 
-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 focusTemplate = () => html`
+        <span class="control"></span>`;
 
-const getClasses = ({
-  dp,
-  noShadow
-}) => classNames(
-  "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)]
-);
-const elevationTemplate = () => html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;
-
-const elevationDefinition = Elevation.compose({
-  baseName: "elevation",
-  template: elevationTemplate,
+const focusDefinition = Focus.compose({
+  baseName: "focus",
+  template: focusTemplate,
   styles
 });
-const elevationRegistries = [elevationDefinition()];
-const registerElevation = registerFactory(elevationRegistries);
+const focusRegistries = [focusDefinition()];
+const registerFocus = registerFactory(focusRegistries);
 
-export { Elevation as E, elevationRegistries as e, registerElevation as r };
+export { focusRegistries as f, registerFocus as r };

package/shared/definition57.js

@@ -1,14 +1,6 @@
 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 { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-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) => {
@@ -20,162 +12,36 @@ var __decorateClass = (decorators, target, key, kind) => {
     __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 })];
-    }
-    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());
-    }
-  }
-  /**
-   * Updates popup's position
-   *
-   * @public
-   */
-  async updatePosition() {
-    if (!this.open || !this.anchorEl) {
-      return;
-    }
-    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;
-  }
+class Elevation extends FoundationElement {
 }
-__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);
+], Elevation.prototype, "dp", 2);
+__decorateClass([
+  attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow", 2);
 
-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 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 = ({
-  open,
-  dismissible,
-  alternate
+  dp,
+  noShadow
 }) => classNames(
   "control",
-  ["open", Boolean(open)],
-  ["dismissible", Boolean(dismissible)],
-  ["alternate", Boolean(alternate)]
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)]
 );
-const popupTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  const buttonTag = context.tagFor(Button);
-  return html`
-  <${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 elevationTemplate = () => html`
+        <div class="${getClasses}" part="base">
+			<slot></slot>
+		</div>`;
 
-const popupDefinition = Popup.compose({
-  baseName: "popup",
-  template: popupTemplate,
+const elevationDefinition = Elevation.compose({
+  baseName: "elevation",
+  template: elevationTemplate,
   styles
 });
-const popupRegistries = [popupDefinition(), ...elevationRegistries, ...buttonRegistries];
-const registerPopup = registerFactory(popupRegistries);
+const elevationRegistries = [elevationDefinition()];
+const registerElevation = registerFactory(elevationRegistries);
 
-export { Popup as P, popupRegistries as p, registerPopup as r };
+export { Elevation as E, elevationRegistries as e, registerElevation as r };