@vonage/vivid 4.16.1 → 4.17.0

package/shared/definition29.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition$1 = require('./definition63.cjs');
+const definition$1 = require('./definition64.cjs');
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
@@ -11,8 +11,8 @@ const anchored = require('./anchored.cjs');
 const dom = require('./dom.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
-const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 
 const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
@@ -31,27 +31,17 @@ const roleForMenuItem = {
 };
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   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$1(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _Menu_instances, triggerBehaviour_get, setupAnchor_fn, updateAnchor_fn, cleanupAnchor_fn, _onAnchorClick;
-exports.Menu = class Menu extends vividElement.VividElement {
+const _Menu = class _Menu extends anchored.Anchored(vividElement.VividElement) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _Menu_instances);
     this.expandedItem = null;
     /**
      * The index of the focusable element in the items array
@@ -120,7 +110,7 @@ exports.Menu = class Menu extends vividElement.VividElement {
      */
     this.isMenuItemElement = (el) => {
       return dom.isHTMLElement(el) && Object.prototype.hasOwnProperty.call(
-        exports.Menu.focusableElementRoles,
+        _Menu.focusableElementRoles,
         el.getAttribute("role")
       );
     };
@@ -135,16 +125,16 @@ exports.Menu = class Menu extends vividElement.VividElement {
     this.autoDismiss = false;
     this.positionStrategy = "fixed";
     this.open = false;
-    __privateAdd(this, _onAnchorClick, () => {
-      if (__privateGet(this, _Menu_instances, triggerBehaviour_get) === "off") {
+    this.#onAnchorClick = () => {
+      if (this.#triggerBehaviour === "off") {
         return;
       }
-      if (__privateGet(this, _Menu_instances, triggerBehaviour_get) === "legacy" && this.open) {
+      if (this.#triggerBehaviour === "legacy" && this.open) {
         return;
       }
       const newValue = !this.open;
       vividElement.DOM.queueUpdate(() => this.open = newValue);
-    });
+    };
     this._onFocusout = (e) => {
       const focusTarget = e.relatedTarget;
       const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
@@ -161,6 +151,9 @@ exports.Menu = class Menu extends vividElement.VividElement {
       this.setItems();
     }
   }
+  static {
+    this.focusableElementRoles = roleForMenuItem;
+  }
   /**
    * @internal
    */
@@ -253,29 +246,50 @@ exports.Menu = class Menu extends vividElement.VividElement {
       focusIndex += adjustment;
     }
   }
+  get #triggerBehaviour() {
+    return this.trigger ?? "legacy";
+  }
   openChanged(_, newValue) {
     if (newValue) {
-      this._popupEl?.show();
-      this.focus();
+      this._popupEl?.show().then(() => this.focus());
     }
     newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
     if (this._anchorEl) {
-      __privateMethod(this, _Menu_instances, updateAnchor_fn).call(this, this._anchorEl);
+      this.#updateAnchor(this._anchorEl);
     }
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
-    if (oldValue) __privateMethod(this, _Menu_instances, cleanupAnchor_fn).call(this, oldValue);
-    if (newValue) __privateMethod(this, _Menu_instances, setupAnchor_fn).call(this, newValue);
+    if (oldValue) this.#cleanupAnchor(oldValue);
+    if (newValue) this.#setupAnchor(newValue);
+  }
+  #setupAnchor(a) {
+    a.addEventListener("click", this.#onAnchorClick, true);
+    a.addEventListener("focusout", this._onFocusout);
+    a.setAttribute("aria-haspopup", "menu");
+    this.#updateAnchor(a);
   }
+  #updateAnchor(a) {
+    a.setAttribute("aria-expanded", this.open.toString());
+  }
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#onAnchorClick, true);
+    a.removeEventListener("focusout", this._onFocusout);
+    a.removeAttribute("aria-hasPopup");
+    a.removeAttribute("aria-expanded");
+  }
+  #onAnchorClick;
   /**
    * @internal
    */
   _onChange(e) {
+    if (this.menuItems === void 0) {
+      return;
+    }
     const clickedOnNonCheckboxMenuItem = e.target instanceof HTMLElement && (e.target.role === "menuitem" || e.target.role === "menuitemradio");
-    if (__privateGet(this, _Menu_instances, triggerBehaviour_get) === "auto" && clickedOnNonCheckboxMenuItem) {
+    if (this.#triggerBehaviour === "auto" && clickedOnNonCheckboxMenuItem) {
       this.open = false;
     }
     const changedMenuItem = e.target;
@@ -309,57 +323,34 @@ exports.Menu = class Menu extends vividElement.VividElement {
     return true;
   }
 };
-_Menu_instances = new WeakSet();
-triggerBehaviour_get = function() {
-  return this.trigger ?? "legacy";
-};
-setupAnchor_fn = function(a) {
-  a.addEventListener("click", __privateGet(this, _onAnchorClick), true);
-  a.addEventListener("focusout", this._onFocusout);
-  a.setAttribute("aria-haspopup", "menu");
-  __privateMethod(this, _Menu_instances, updateAnchor_fn).call(this, a);
-};
-updateAnchor_fn = function(a) {
-  a.setAttribute("aria-expanded", this.open.toString());
-};
-cleanupAnchor_fn = function(a) {
-  a.removeEventListener("click", __privateGet(this, _onAnchorClick), true);
-  a.removeEventListener("focusout", this._onFocusout);
-  a.removeAttribute("aria-hasPopup");
-  a.removeAttribute("aria-expanded");
-};
-_onAnchorClick = new WeakMap();
-exports.Menu.focusableElementRoles = roleForMenuItem;
 __decorateClass$1([
   vividElement.observable
-], exports.Menu.prototype, "items", 2);
+], _Menu.prototype, "items");
 __decorateClass$1([
   vividElement.attr({ attribute: "aria-label" })
-], exports.Menu.prototype, "ariaLabel", 2);
+], _Menu.prototype, "ariaLabel");
 __decorateClass$1([
   vividElement.attr({ mode: "fromView" })
-], exports.Menu.prototype, "placement", 2);
+], _Menu.prototype, "placement");
 __decorateClass$1([
   vividElement.attr
-], exports.Menu.prototype, "trigger", 2);
+], _Menu.prototype, "trigger");
 __decorateClass$1([
   vividElement.attr({ mode: "boolean", attribute: "auto-dismiss" })
-], exports.Menu.prototype, "autoDismiss", 2);
+], _Menu.prototype, "autoDismiss");
 __decorateClass$1([
   vividElement.attr({ mode: "fromView", attribute: "position-strategy" })
-], exports.Menu.prototype, "positionStrategy", 2);
+], _Menu.prototype, "positionStrategy");
 __decorateClass$1([
   vividElement.attr({ mode: "boolean" })
-], exports.Menu.prototype, "open", 2);
+], _Menu.prototype, "open");
 __decorateClass$1([
   vividElement.observable
-], exports.Menu.prototype, "headerSlottedContent", 2);
+], _Menu.prototype, "headerSlottedContent");
 __decorateClass$1([
   vividElement.observable
-], exports.Menu.prototype, "actionItemsSlottedContent", 2);
-exports.Menu = __decorateClass$1([
-  anchored.anchored
-], exports.Menu);
+], _Menu.prototype, "actionItemsSlottedContent");
+let Menu = _Menu;
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -786,7 +777,7 @@ const MenuTemplate = (context) => {
 const menuName = "menu";
 const menuDefinition = vividElement.defineVividComponent(
   menuName,
-  exports.Menu,
+  Menu,
   MenuTemplate,
   [definition$1.popupDefinition, menuItemDefinition],
   {
@@ -795,6 +786,7 @@ const menuDefinition = vividElement.defineVividComponent(
 );
 const registerMenu = vividElement.createRegisterFunction(menuDefinition);
 
+exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuItemRole = MenuItemRole;
 exports.menuDefinition = menuDefinition;

package/shared/definition29.js

@@ -1,16 +1,16 @@
-import { P as Popup, p as popupDefinition } from './definition63.js';
+import { P as Popup, p as popupDefinition } from './definition64.js';
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { V as VividElement, D as DOM, o as observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { D as DOM, V as VividElement, o as observable, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown, h as keyArrowLeft, i as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { D as Direction, g as getDirection } from './direction.js';
-import { a as anchored, b as anchorSlotTemplateFactory } from './anchored.js';
+import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
 import { i as isHTMLElement } from './dom.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { r as ref } from './ref.js';
-import { s as slotted, e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
 
 const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
@@ -29,27 +29,17 @@ const roleForMenuItem = {
 };
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   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$1(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _Menu_instances, triggerBehaviour_get, setupAnchor_fn, updateAnchor_fn, cleanupAnchor_fn, _onAnchorClick;
-let Menu = class extends VividElement {
+const _Menu = class _Menu extends Anchored(VividElement) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _Menu_instances);
     this.expandedItem = null;
     /**
      * The index of the focusable element in the items array
@@ -118,7 +108,7 @@ let Menu = class extends VividElement {
      */
     this.isMenuItemElement = (el) => {
       return isHTMLElement(el) && Object.prototype.hasOwnProperty.call(
-        Menu.focusableElementRoles,
+        _Menu.focusableElementRoles,
         el.getAttribute("role")
       );
     };
@@ -133,16 +123,16 @@ let Menu = class extends VividElement {
     this.autoDismiss = false;
     this.positionStrategy = "fixed";
     this.open = false;
-    __privateAdd(this, _onAnchorClick, () => {
-      if (__privateGet(this, _Menu_instances, triggerBehaviour_get) === "off") {
+    this.#onAnchorClick = () => {
+      if (this.#triggerBehaviour === "off") {
         return;
       }
-      if (__privateGet(this, _Menu_instances, triggerBehaviour_get) === "legacy" && this.open) {
+      if (this.#triggerBehaviour === "legacy" && this.open) {
         return;
       }
       const newValue = !this.open;
       DOM.queueUpdate(() => this.open = newValue);
-    });
+    };
     this._onFocusout = (e) => {
       const focusTarget = e.relatedTarget;
       const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
@@ -159,6 +149,9 @@ let Menu = class extends VividElement {
       this.setItems();
     }
   }
+  static {
+    this.focusableElementRoles = roleForMenuItem;
+  }
   /**
    * @internal
    */
@@ -251,29 +244,50 @@ let Menu = class extends VividElement {
       focusIndex += adjustment;
     }
   }
+  get #triggerBehaviour() {
+    return this.trigger ?? "legacy";
+  }
   openChanged(_, newValue) {
     if (newValue) {
-      this._popupEl?.show();
-      this.focus();
+      this._popupEl?.show().then(() => this.focus());
     }
     newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
     if (this._anchorEl) {
-      __privateMethod(this, _Menu_instances, updateAnchor_fn).call(this, this._anchorEl);
+      this.#updateAnchor(this._anchorEl);
     }
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
-    if (oldValue) __privateMethod(this, _Menu_instances, cleanupAnchor_fn).call(this, oldValue);
-    if (newValue) __privateMethod(this, _Menu_instances, setupAnchor_fn).call(this, newValue);
+    if (oldValue) this.#cleanupAnchor(oldValue);
+    if (newValue) this.#setupAnchor(newValue);
+  }
+  #setupAnchor(a) {
+    a.addEventListener("click", this.#onAnchorClick, true);
+    a.addEventListener("focusout", this._onFocusout);
+    a.setAttribute("aria-haspopup", "menu");
+    this.#updateAnchor(a);
   }
+  #updateAnchor(a) {
+    a.setAttribute("aria-expanded", this.open.toString());
+  }
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#onAnchorClick, true);
+    a.removeEventListener("focusout", this._onFocusout);
+    a.removeAttribute("aria-hasPopup");
+    a.removeAttribute("aria-expanded");
+  }
+  #onAnchorClick;
   /**
    * @internal
    */
   _onChange(e) {
+    if (this.menuItems === void 0) {
+      return;
+    }
     const clickedOnNonCheckboxMenuItem = e.target instanceof HTMLElement && (e.target.role === "menuitem" || e.target.role === "menuitemradio");
-    if (__privateGet(this, _Menu_instances, triggerBehaviour_get) === "auto" && clickedOnNonCheckboxMenuItem) {
+    if (this.#triggerBehaviour === "auto" && clickedOnNonCheckboxMenuItem) {
       this.open = false;
     }
     const changedMenuItem = e.target;
@@ -307,57 +321,34 @@ let Menu = class extends VividElement {
     return true;
   }
 };
-_Menu_instances = new WeakSet();
-triggerBehaviour_get = function() {
-  return this.trigger ?? "legacy";
-};
-setupAnchor_fn = function(a) {
-  a.addEventListener("click", __privateGet(this, _onAnchorClick), true);
-  a.addEventListener("focusout", this._onFocusout);
-  a.setAttribute("aria-haspopup", "menu");
-  __privateMethod(this, _Menu_instances, updateAnchor_fn).call(this, a);
-};
-updateAnchor_fn = function(a) {
-  a.setAttribute("aria-expanded", this.open.toString());
-};
-cleanupAnchor_fn = function(a) {
-  a.removeEventListener("click", __privateGet(this, _onAnchorClick), true);
-  a.removeEventListener("focusout", this._onFocusout);
-  a.removeAttribute("aria-hasPopup");
-  a.removeAttribute("aria-expanded");
-};
-_onAnchorClick = new WeakMap();
-Menu.focusableElementRoles = roleForMenuItem;
 __decorateClass$1([
   observable
-], Menu.prototype, "items", 2);
+], _Menu.prototype, "items");
 __decorateClass$1([
   attr({ attribute: "aria-label" })
-], Menu.prototype, "ariaLabel", 2);
+], _Menu.prototype, "ariaLabel");
 __decorateClass$1([
   attr({ mode: "fromView" })
-], Menu.prototype, "placement", 2);
+], _Menu.prototype, "placement");
 __decorateClass$1([
   attr
-], Menu.prototype, "trigger", 2);
+], _Menu.prototype, "trigger");
 __decorateClass$1([
   attr({ mode: "boolean", attribute: "auto-dismiss" })
-], Menu.prototype, "autoDismiss", 2);
+], _Menu.prototype, "autoDismiss");
 __decorateClass$1([
   attr({ mode: "fromView", attribute: "position-strategy" })
-], Menu.prototype, "positionStrategy", 2);
+], _Menu.prototype, "positionStrategy");
 __decorateClass$1([
   attr({ mode: "boolean" })
-], Menu.prototype, "open", 2);
+], _Menu.prototype, "open");
 __decorateClass$1([
   observable
-], Menu.prototype, "headerSlottedContent", 2);
+], _Menu.prototype, "headerSlottedContent");
 __decorateClass$1([
   observable
-], Menu.prototype, "actionItemsSlottedContent", 2);
-Menu = __decorateClass$1([
-  anchored
-], Menu);
+], _Menu.prototype, "actionItemsSlottedContent");
+let Menu = _Menu;
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -793,4 +784,4 @@ const menuDefinition = defineVividComponent(
 );
 const registerMenu = createRegisterFunction(menuDefinition);
 
-export { MenuItemRole as M, menuName as a, menuDefinition as b, registerMenu as c, Menu as d, MenuItem as e, menuItemDefinition as m, registerMenuItem as r };
+export { MenuItem as M, MenuItemRole as a, menuName as b, menuDefinition as c, registerMenu as d, Menu as e, menuItemDefinition as m, registerMenuItem as r };

package/shared/definition3.cjs

@@ -67,5 +67,6 @@ const registerActionGroup = vividElement.createRegisterFunction(
   actionGroupDefinition
 );
 
+exports.ActionGroup = ActionGroup;
 exports.actionGroupDefinition = actionGroupDefinition;
 exports.registerActionGroup = registerActionGroup;

package/shared/definition3.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
@@ -65,4 +65,4 @@ const registerActionGroup = createRegisterFunction(
   actionGroupDefinition
 );
 
-export { actionGroupDefinition as a, registerActionGroup as r };
+export { ActionGroup as A, actionGroupDefinition as a, registerActionGroup as r };

package/shared/definition30.cjs

@@ -106,5 +106,6 @@ const registerNavDisclosure = vividElement.createRegisterFunction(
   navDisclosureDefinition
 );
 
+exports.NavDisclosure = NavDisclosure;
 exports.navDisclosureDefinition = navDisclosureDefinition;
 exports.registerNavDisclosure = registerNavDisclosure;

package/shared/definition30.js

@@ -1,5 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { r as ref } from './ref.js';
@@ -104,4 +104,4 @@ const registerNavDisclosure = createRegisterFunction(
   navDisclosureDefinition
 );
 
-export { navDisclosureDefinition as n, registerNavDisclosure as r };
+export { NavDisclosure as N, navDisclosureDefinition as n, registerNavDisclosure as r };

package/shared/definition31.cjs

@@ -32,5 +32,6 @@ const navItemDefinition = vividElement.defineVividComponent(
 );
 const registerNavItem = vividElement.createRegisterFunction(navItemDefinition);
 
+exports.NavItem = NavItem;
 exports.navItemDefinition = navItemDefinition;
 exports.registerNavItem = registerNavItem;

package/shared/definition31.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { b as AffixIcon } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { T as TextAnchor } from './text-anchor.js';
@@ -30,4 +30,4 @@ const navItemDefinition = defineVividComponent(
 );
 const registerNavItem = createRegisterFunction(navItemDefinition);
 
-export { navItemDefinition as n, registerNavItem as r };
+export { NavItem as N, navItemDefinition as n, registerNavItem as r };

package/shared/definition32.cjs

@@ -14,5 +14,6 @@ const navDefinition = vividElement.defineVividComponent("nav", Nav, NavTemplate,
 });
 const registerNav = vividElement.createRegisterFunction(navDefinition);
 
+exports.Nav = Nav;
 exports.navDefinition = navDefinition;
 exports.registerNav = registerNav;

package/shared/definition32.js

@@ -1,4 +1,4 @@
-import { V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 
 const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 
@@ -12,4 +12,4 @@ const navDefinition = defineVividComponent("nav", Nav, NavTemplate, [], {
 });
 const registerNav = createRegisterFunction(navDefinition);
 
-export { navDefinition as n, registerNav as r };
+export { Nav as N, navDefinition as n, registerNav as r };

package/shared/definition33.cjs

@@ -4,8 +4,8 @@ const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
-const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
 const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
 
@@ -56,5 +56,6 @@ const noteDefinition = vividElement.defineVividComponent(
 );
 const registerNote = vividElement.createRegisterFunction(noteDefinition);
 
+exports.Note = Note;
 exports.noteDefinition = noteDefinition;
 exports.registerNote = registerNote;

package/shared/definition33.js

@@ -1,9 +1,9 @@
 import { i as iconDefinition } from './definition27.js';
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
 const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
 
@@ -54,4 +54,4 @@ const noteDefinition = defineVividComponent(
 );
 const registerNote = createRegisterFunction(noteDefinition);
 
-export { noteDefinition as n, registerNote as r };
+export { Note as N, noteDefinition as n, registerNote as r };