@vonage/vivid 3.40.0 → 3.41.0

package/shared/definition6.js

@@ -1,10 +1,11 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
+import { a as iconRegistries } from './definition26.js';
+import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n.base.shape-pill {\n  border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,54 +17,63 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Badge extends FoundationElement {
+class Avatar extends FoundationElement {
 }
 __decorateClass([
   attr
-], Badge.prototype, "connotation", 2);
+], Avatar.prototype, "connotation", 2);
 __decorateClass([
   attr
-], Badge.prototype, "shape", 2);
+], Avatar.prototype, "shape", 2);
 __decorateClass([
   attr
-], Badge.prototype, "appearance", 2);
+], Avatar.prototype, "appearance", 2);
 __decorateClass([
   attr
-], Badge.prototype, "text", 2);
-applyMixins(Badge, AffixIconWithTrailing);
-
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-condensed-bold);\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: flex;\n  order: 1;\n}";
+], Avatar.prototype, "size", 2);
+__decorateClass([
+  attr
+], Avatar.prototype, "icon", 2);
+__decorateClass([
+  attr
+], Avatar.prototype, "initials", 2);
 
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  iconTrailing,
-  text,
-  icon
-}) => classNames(
+const getClasses = ({ appearance, connotation, shape, size }) => classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
-  ["icon-trailing", iconTrailing],
-  ["icon-only", !text && Boolean(icon)]
+  [`size-${size}`, Boolean(size)]
 );
-const badgeTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
+function renderIcon(iconTag) {
+  return html`
+		<span class="icon">
+			<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
+		</span>
+	`;
+}
+function renderInitials() {
+  return html`
+		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
+	`;
+}
+const AvatarTemplate = (context) => {
+  const iconTag = context.tagFor(Icon);
   return html`
-    <span class="${getClasses}">
-      ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			${when((x) => x.text, (x) => html`<span class="text">${x.text}</span>`)}
-	</span>`;
+	<span class="${getClasses}">
+		<slot name="graphic">
+			${when((x) => x.initials, renderInitials())}
+			${when((x) => !x.initials, renderIcon(iconTag))}
+		</slot>
+</span>`;
 };
 
-const badgeDefinition = Badge.compose({
-  baseName: "badge",
-  template: badgeTemplate,
+const avatarDefinition = Avatar.compose({
+  baseName: "avatar",
+  template: AvatarTemplate,
   styles
 });
-const badgeRegistries = [badgeDefinition(), ...iconRegistries];
-const registerBadge = registerFactory(badgeRegistries);
+const avatarRegistries = [avatarDefinition(), ...iconRegistries];
+const registerAvatar = registerFactory(avatarRegistries);
 
-export { badgeDefinition as b, registerBadge as r };
+export { avatarDefinition as a, avatarRegistries as b, registerAvatar as r };

package/shared/definition60.js

@@ -0,0 +1,181 @@
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { B as Button, a as buttonRegistries } from './definition11.js';
+import { E as Elevation, e as elevationRegistries } from './definition59.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) => {
+  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 })];
+    }
+    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;
+  }
+}
+__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);
+
+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 = ({
+  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`
+  <${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 popupDefinition = Popup.compose({
+  baseName: "popup",
+  template: popupTemplate,
+  styles
+});
+const popupRegistries = [popupDefinition(), ...elevationRegistries, ...buttonRegistries];
+const registerPopup = registerFactory(popupRegistries);
+
+export { Popup as P, popupRegistries as p, registerPopup as r };

package/shared/definition7.js

@@ -1,14 +1,10 @@
-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 { a as iconRegistries } from './definition25.js';
-import { C as Connotation } from './enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  display: block;\n}\n\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\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.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content slot[name=icon] {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,117 +16,54 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const connotationIconMap = /* @__PURE__ */ new Map([
-  [Connotation.Information, "info-solid"],
-  [Connotation.Announcement, "megaphone-solid"],
-  [Connotation.Success, "check-circle-solid"],
-  [Connotation.Warning, "warning-solid"],
-  [Connotation.Alert, "error-solid"]
-]);
-const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.role = null;
-    this.removable = false;
-    this.#handleRemoveEnd = () => {
-      this.$emit("removed");
-      this.parentElement && this.parentElement.removeChild(this);
-    };
-    this.#closeOnKeyDown = (e) => {
-      if (e.key !== "Escape" || !this.removable) {
-        return;
-      }
-      this.remove();
-    };
-  }
-  get conditionedIcon() {
-    return this.icon ?? defaultConnotation(this.connotation);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.#closeOnKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("keydown", this.#closeOnKeyDown);
-  }
-  remove() {
-    this.$emit("removing");
-    const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
-    if (banner) {
-      banner.classList.add("removing");
-      banner.addEventListener("transitionend", this.#handleRemoveEnd);
-    }
-  }
-  #handleRemoveEnd;
-  #closeOnKeyDown;
+class Badge extends FoundationElement {
 }
 __decorateClass([
   attr
-], Banner.prototype, "role", 2);
-__decorateClass([
-  attr({ attribute: "action-href" })
-], Banner.prototype, "actionHref", 2);
-__decorateClass([
-  attr({ attribute: "action-text" })
-], Banner.prototype, "actionText", 2);
+], Badge.prototype, "connotation", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], Banner.prototype, "removable", 2);
-__decorateClass([
-  attr({ attribute: "aria-live" })
-], Banner.prototype, "ariaLive", 2);
+  attr
+], Badge.prototype, "shape", 2);
 __decorateClass([
-  attr()
-], Banner.prototype, "text", 2);
+  attr
+], Badge.prototype, "appearance", 2);
 __decorateClass([
-  attr()
-], Banner.prototype, "connotation", 2);
-applyMixins(Banner, AffixIcon);
+  attr
+], Badge.prototype, "text", 2);
+applyMixins(Badge, AffixIconWithTrailing);
+
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-condensed-bold);\n  inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: flex;\n  order: 1;\n}";
 
-const getClasses = (_) => classNames(
-  "control",
-  [`connotation-${_.connotation}`, !!_.connotation]
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  iconTrailing,
+  text,
+  icon
+}) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["icon-trailing", iconTrailing],
+  ["icon-only", !text && Boolean(icon)]
 );
-function renderDismissButton(buttonTag) {
-  return html`
-	  <${buttonTag}
-				part="vvd-theme-alternate"
-			  size="condensed"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${(x) => x.remove()}">
-	  </${buttonTag}>`;
-}
-const BannerTemplate = (context) => {
+const badgeTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
-  const buttonTag = context.tagFor(Button);
   return html`
-	  <div class="${getClasses}" tabindex="0">
-		  <header class="header">
-					<div class="content">
-            ${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
-						<div class="banner-message"
-						 role="${(x) => x.role ? x.role : "status"}"
-						 aria-live="${(x) => x.ariaLive ? x.ariaLive : "polite"}">
-									${(x) => x.text}
-            </div>
-						<slot class="action-items" name="action-items"></slot>
-					</div>
-
-			  ${when((x) => x.removable, renderDismissButton(buttonTag))}
-		  </header>
-	  </div>
-	`;
+    <span class="${getClasses}">
+      ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			${when((x) => x.text, (x) => html`<span class="text">${x.text}</span>`)}
+	</span>`;
 };
 
-const bannerDefinition = Banner.compose({
-  baseName: "banner",
-  template: BannerTemplate,
+const badgeDefinition = Badge.compose({
+  baseName: "badge",
+  template: badgeTemplate,
   styles
 });
-const bannerRegistries = [bannerDefinition(), ...iconRegistries, ...buttonRegistries];
-const registerBanner = registerFactory(bannerRegistries);
+const badgeRegistries = [badgeDefinition(), ...iconRegistries];
+const registerBadge = registerFactory(badgeRegistries);
 
-export { bannerRegistries as a, bannerDefinition as b, registerBanner as r };
+export { badgeDefinition as b, registerBadge as r };