@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition28.js

@@ -1,13 +1,13 @@
 import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
+import { b as anchored } from './anchored.js';
 import { S as StartEnd } from './start-end.js';
 import { D as Direction, g as getDirection } from './direction.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-codes.js';
-import { I as Icon } from './icon.js';
-import { b as anchored } from './anchored.js';
 import { i as isHTMLElement } from './dom.js';
+import { I as Icon } from './icon.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -568,7 +568,7 @@ __decorate([
     observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.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);gap:12px;inline-size:100%;padding-block:2px;padding-inline:16px}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base{--_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-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:not(.two-lines){min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.two-lines{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;border-radius:8px}.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)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.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;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--_appearance-color-text);font:var(--vvd-typography-base)}.text-primary{-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.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{--_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: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;border-radius:8px}.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)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.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;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}.base.two-lines:not(.disabled).selected .text-secondary{color:var(--vvd-color-neutral-800)}\n";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -581,109 +581,61 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
     __defProp$1(target, key, result);
   return result;
 };
-const MenuItemRole = {
-  ...MenuItemRole$1,
-  presentation: "presentation"
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
 };
-var CheckAppearance = /* @__PURE__ */ ((CheckAppearance2) => {
-  CheckAppearance2["Normal"] = "normal";
-  CheckAppearance2["TickOnly"] = "tick-only";
-  return CheckAppearance2;
-})(CheckAppearance || {});
-class MenuItem extends MenuItem$1 {
-  constructor() {
-    super();
-    this.checkTrailing = false;
-    this.#submenuArray = [];
-    this.updateSubmenu = () => this.#updateSubmenu();
-    this.addEventListener("expanded-change", this.#expandedChange);
-  }
-  #submenuArray;
-  /**
-   *
-   *
-   * @internal
-   */
-  slottedSubmenuChanged(_oldValue, newValue) {
-    this.#submenuArray = newValue;
-  }
-  #updateSubmenu() {
-    for (const submenu of this.#submenuArray) {
-      this.submenu = submenu;
-      this.submenu.anchor = this;
-      this.submenu.placement = "right-start";
-      this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
-    }
-    this.hasSubmenu = this.submenu === void 0 ? false : true;
-  }
-  #collapseExpandedItem() {
-    this.expanded = false;
-  }
-  #expandedChange() {
-    if (this.hasSubmenu) {
-      this.submenu.open = this.expanded;
-    }
-  }
-}
-__decorateClass$1([
-  attr
-], MenuItem.prototype, "text", 2);
-__decorateClass$1([
-  attr({ attribute: "text-secondary" })
-], MenuItem.prototype, "textSecondary", 2);
-__decorateClass$1([
-  attr({ mode: "boolean", attribute: "check-trailing" })
-], MenuItem.prototype, "checkTrailing", 2);
-__decorateClass$1([
-  attr({ attribute: "check-appearance" })
-], MenuItem.prototype, "checkedAppearance", 2);
-__decorateClass$1([
-  observable
-], MenuItem.prototype, "metaSlottedContent", 2);
-__decorateClass$1([
-  observable
-], MenuItem.prototype, "trailingMetaSlottedContent", 2);
-__decorateClass$1([
-  observable
-], MenuItem.prototype, "slottedSubmenu", 2);
-applyMixins(MenuItem, AffixIcon);
-
-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;
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
 };
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw 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");
+  return method;
+};
+var _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _openIfClosed, _updateClickOutsideListeners, _wasOpenBeforeClick, _onClickOutsideCapture, _onClickOutside;
 let Menu = class extends Menu$1 {
   constructor() {
     super();
+    __privateAdd(this, _setupAnchor);
+    __privateAdd(this, _updateAnchor);
+    __privateAdd(this, _cleanupAnchor);
     this.ariaLabel = null;
     this.placement = "bottom";
     this.autoDismiss = false;
     this.open = false;
-    this.#openIfClosed = () => {
+    __privateAdd(this, _openIfClosed, () => {
       if (!this.open)
         DOM.queueUpdate(() => this.open = true);
-    };
-    this.#updateClickOutsideListener = () => {
-      document.removeEventListener("click", this.#closeOnClickOutside);
+    });
+    __privateAdd(this, _updateClickOutsideListeners, () => {
+      document.removeEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
+      document.removeEventListener("click", __privateGet(this, _onClickOutside));
       if (this.autoDismiss && this.isConnected) {
-        document.addEventListener("click", this.#closeOnClickOutside);
+        document.addEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
+        document.addEventListener("click", __privateGet(this, _onClickOutside));
       }
-    };
-    this.#closeOnClickOutside = (e) => {
-      if (!this.contains(e.target))
+    });
+    __privateAdd(this, _wasOpenBeforeClick, /* @__PURE__ */ new WeakMap());
+    __privateAdd(this, _onClickOutsideCapture, (e) => {
+      __privateGet(this, _wasOpenBeforeClick).set(e, this.open);
+    });
+    __privateAdd(this, _onClickOutside, (e) => {
+      if (!this.contains(e.target) && __privateGet(this, _wasOpenBeforeClick).get(e)) {
         this.open = false;
-    };
+      }
+    });
     const handleFocusOut = this.handleFocusOut;
     this.handleFocusOut = (e) => {
       const privates = this;
-      const isSafeToCallSuper = privates.menuItems.some(privates.isFocusableElement);
+      const isSafeToCallSuper = privates.menuItems.some(
+        privates.isFocusableElement
+      );
       if (!isSafeToCallSuper) {
         return;
       }
@@ -693,70 +645,156 @@ let Menu = class extends Menu$1 {
   autoDismissChanged(oldValue) {
     if (oldValue === void 0)
       return;
-    this.#updateClickOutsideListener();
+    __privateGet(this, _updateClickOutsideListeners).call(this);
   }
   openChanged(_, newValue) {
     newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
     if (this._anchorEl) {
-      this.#updateAnchor(this._anchorEl);
+      __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, this._anchorEl);
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#updateClickOutsideListener();
+    __privateGet(this, _updateClickOutsideListeners).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#updateClickOutsideListener();
+    __privateGet(this, _updateClickOutsideListeners).call(this);
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
     if (oldValue)
-      this.#cleanupAnchor(oldValue);
+      __privateMethod(this, _cleanupAnchor, cleanupAnchor_fn).call(this, oldValue);
     if (newValue)
-      this.#setupAnchor(newValue);
+      __privateMethod(this, _setupAnchor, setupAnchor_fn).call(this, newValue);
   }
-  #setupAnchor(a) {
-    a.addEventListener("click", this.#openIfClosed, true);
-    a.setAttribute("aria-haspopup", "menu");
-    this.#updateAnchor(a);
-  }
-  #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-  }
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openIfClosed, true);
-    a.removeAttribute("aria-hasPopup");
-    a.removeAttribute("aria-expanded");
-  }
-  #openIfClosed;
-  #updateClickOutsideListener;
-  #closeOnClickOutside;
 };
-__decorateClass([
+_setupAnchor = new WeakSet();
+setupAnchor_fn = function(a) {
+  a.addEventListener("click", __privateGet(this, _openIfClosed), true);
+  a.setAttribute("aria-haspopup", "menu");
+  __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, a);
+};
+_updateAnchor = new WeakSet();
+updateAnchor_fn = function(a) {
+  a.setAttribute("aria-expanded", this.open.toString());
+};
+_cleanupAnchor = new WeakSet();
+cleanupAnchor_fn = function(a) {
+  a.removeEventListener("click", __privateGet(this, _openIfClosed), true);
+  a.removeAttribute("aria-hasPopup");
+  a.removeAttribute("aria-expanded");
+};
+_openIfClosed = new WeakMap();
+_updateClickOutsideListeners = new WeakMap();
+_wasOpenBeforeClick = new WeakMap();
+_onClickOutsideCapture = new WeakMap();
+_onClickOutside = new WeakMap();
+__decorateClass$1([
   attr({ attribute: "aria-label" })
 ], Menu.prototype, "ariaLabel", 2);
-__decorateClass([
+__decorateClass$1([
   attr({ mode: "fromView" })
 ], Menu.prototype, "placement", 2);
-__decorateClass([
+__decorateClass$1([
   attr({ mode: "boolean", attribute: "auto-dismiss" })
 ], Menu.prototype, "autoDismiss", 2);
-__decorateClass([
+__decorateClass$1([
   attr({ mode: "boolean" })
 ], Menu.prototype, "open", 2);
-__decorateClass([
+__decorateClass$1([
   observable
 ], Menu.prototype, "headerSlottedContent", 2);
-__decorateClass([
+__decorateClass$1([
   observable
 ], Menu.prototype, "actionItemsSlottedContent", 2);
-Menu = __decorateClass([
+Menu = __decorateClass$1([
   anchored
 ], Menu);
 
+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;
+};
+const MenuItemRole = {
+  ...MenuItemRole$1,
+  presentation: "presentation"
+};
+var CheckAppearance = /* @__PURE__ */ ((CheckAppearance2) => {
+  CheckAppearance2["Normal"] = "normal";
+  CheckAppearance2["TickOnly"] = "tick-only";
+  return CheckAppearance2;
+})(CheckAppearance || {});
+class MenuItem extends MenuItem$1 {
+  constructor() {
+    super();
+    this.checkTrailing = false;
+    this.#submenuArray = [];
+    this.updateSubmenu = () => this.#updateSubmenu();
+    this.addEventListener("expanded-change", this.#expandedChange);
+  }
+  #submenuArray;
+  /**
+   *
+   *
+   * @internal
+   */
+  slottedSubmenuChanged(_oldValue, newValue) {
+    this.#submenuArray = newValue;
+  }
+  #updateSubmenu() {
+    for (const submenu of this.#submenuArray) {
+      this.submenu = submenu;
+      this.submenu.anchor = this;
+      this.submenu.placement = "right-start";
+      this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
+    }
+    this.hasSubmenu = this.submenu === void 0 ? false : true;
+  }
+  #collapseExpandedItem() {
+    this.expanded = false;
+  }
+  #expandedChange() {
+    if (this.hasSubmenu) {
+      this.submenu.open = this.expanded;
+    }
+  }
+}
+__decorateClass([
+  attr
+], MenuItem.prototype, "text", 2);
+__decorateClass([
+  attr({ attribute: "text-secondary" })
+], MenuItem.prototype, "textSecondary", 2);
+__decorateClass([
+  attr
+], MenuItem.prototype, "connotation", 2);
+__decorateClass([
+  attr({ mode: "boolean", attribute: "check-trailing" })
+], MenuItem.prototype, "checkTrailing", 2);
+__decorateClass([
+  attr({ attribute: "check-appearance" })
+], MenuItem.prototype, "checkedAppearance", 2);
+__decorateClass([
+  observable
+], MenuItem.prototype, "metaSlottedContent", 2);
+__decorateClass([
+  observable
+], MenuItem.prototype, "trailingMetaSlottedContent", 2);
+__decorateClass([
+  observable
+], MenuItem.prototype, "slottedSubmenu", 2);
+applyMixins(MenuItem, AffixIcon);
+
 const getIndicatorIcon = (x) => {
   if (x.checkedAppearance === CheckAppearance.TickOnly) {
     return x.checked ? "check-line" : "";
@@ -766,6 +804,7 @@ const getIndicatorIcon = (x) => {
   return `${iconType}-${iconStatus}-2-line`;
 };
 const getClasses = ({
+  connotation,
   disabled,
   checked,
   role,
@@ -776,9 +815,13 @@ const getClasses = ({
   checkTrailing
 }) => classNames(
   "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
   ["disabled", Boolean(disabled)],
   ["selected", role !== MenuItemRole.menuitem && Boolean(checked)],
-  ["trailing", role !== MenuItemRole.menuitem && (checkTrailing || Boolean(icon))],
+  [
+    "trailing",
+    role !== MenuItemRole.menuitem && (checkTrailing || Boolean(icon))
+  ],
   ["item-checkbox", role === MenuItemRole.menuitemcheckbox],
   ["item-radio", role === MenuItemRole.menuitemradio],
   ["two-lines", Boolean(text2?.length) && Boolean(textSecondary?.length)],
@@ -799,8 +842,14 @@ function text() {
   return html`${when(
     (x) => x.text || x.textSecondary,
     html`<span class="text">
-			${when((x) => x.text, html`<span class="text-primary">${(x) => x.text}</span>`)}
-			${when((x) => x.textSecondary, html`<span class="text-secondary">${(x) => x.textSecondary}</span>`)}
+			${when(
+      (x) => x.text,
+      html`<span class="text-primary">${(x) => x.text}</span>`
+    )}
+			${when(
+      (x) => x.textSecondary,
+      html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
+    )}
 		</span>`
   )}`;
 }
@@ -808,27 +857,44 @@ const MenuItemTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const iconTag = context.tagFor(Icon);
   return html`
-	<template
-		role="${(x) => x.role ? x.role : MenuItemRole.menuitem}"
-		aria-haspopup="${(x) => x.hasSubmenu ? "menu" : void 0}"
-		aria-checked="${(x) => x.role !== MenuItemRole.menuitem ? x.checked : void 0}"
-		aria-disabled="${(x) => x.disabled}"
-		aria-expanded="${(x) => x.expanded}"
-		@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
-		@click="${handleClick}"
-		@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
-		@mouseout="${(x, c) => x.handleMouseOut(c.event)}"
-	>
-		<div class="${getClasses}">
-			<slot name="meta" ${slotted("metaSlottedContent")}></slot>
-			${checkIndicator(context)}
-			${when((x) => x.icon, html`<span class="decorative">${(x) => affixIconTemplate(x.icon)}</span>`)}
-			${text()}
-			<slot name="trailing-meta" ${slotted("trailingMetaSlottedContent")}></slot>
-			${when((x) => x.hasSubmenu, html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
-		</div>
-		<slot name="submenu" ${slotted({ property: "slottedSubmenu", filter: elements(context.tagFor(Menu)) })}></slot>
-	</template>
+		<template
+			role="${(x) => x.role ? x.role : MenuItemRole.menuitem}"
+			aria-haspopup="${(x) => x.hasSubmenu ? "menu" : void 0}"
+			aria-checked="${(x) => x.role !== MenuItemRole.menuitem ? x.checked : void 0}"
+			aria-disabled="${(x) => x.disabled}"
+			aria-expanded="${(x) => x.expanded}"
+			@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
+			@click="${handleClick}"
+			@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
+			@mouseout="${(x, c) => x.handleMouseOut(c.event)}"
+		>
+			<div class="${getClasses}">
+				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
+				${checkIndicator(context)}
+				${when(
+    (x) => x.icon,
+    html`<span class="decorative"
+						>${(x) => affixIconTemplate(x.icon)}</span
+					>`
+  )}
+				${text()}
+				<slot
+					name="trailing-meta"
+					${slotted("trailingMetaSlottedContent")}
+				></slot>
+				${when(
+    (x) => x.hasSubmenu,
+    html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`
+  )}
+			</div>
+			<slot
+				name="submenu"
+				${slotted({
+    property: "slottedSubmenu",
+    filter: elements(context.tagFor(Menu))
+  })}
+			></slot>
+		</template>
 	`;
 };
 

package/shared/definition29.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition60.cjs');
+const definition = require('./definition61.cjs');
 const definition$1 = require('./definition28.cjs');
 const anchored = require('./anchored.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus-visible){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;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus-visible){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;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
 
 const getClasses = ({
   headerSlottedContent,
@@ -56,7 +56,9 @@ const MenuTemplate = (context) => {
 				>
 					<slot ${slotted.slotted("items")}></slot>
 				</div>
-				<footer class="action-items"><slot name="action-items"  ${slotted.slotted("actionItemsSlottedContent")}></slot></footer>
+				<footer class="action-items"><slot name="action-items"  ${slotted.slotted(
+    "actionItemsSlottedContent"
+  )}></slot></footer>
 			</div>
 		</${popupTag}>
 	</template>`;
@@ -67,7 +69,11 @@ const menuDefinition = definition$1.Menu.compose({
   template: MenuTemplate,
   styles
 });
-const menuRegistries = [menuDefinition(), ...definition.popupRegistries, ...definition$1.menuItemRegistries];
+const menuRegistries = [
+  menuDefinition(),
+  ...definition.popupRegistries,
+  ...definition$1.menuItemRegistries
+];
 const registerMenu = index.registerFactory(menuRegistries);
 
 exports.menuDefinition = menuDefinition;

package/shared/definition29.js

@@ -1,11 +1,11 @@
 import { h as html, r as registerFactory } from './index.js';
-import { P as Popup, p as popupRegistries } from './definition60.js';
+import { P as Popup, p as popupRegistries } from './definition61.js';
 import { b as Menu, a as menuItemRegistries } from './definition28.js';
 import { a as anchorSlotTemplateFactory } from './anchored.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);overflow-x:hidden;overflow-y:auto;padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus-visible){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;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header,.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus-visible){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;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
 
 const getClasses = ({
   headerSlottedContent,
@@ -54,7 +54,9 @@ const MenuTemplate = (context) => {
 				>
 					<slot ${slotted("items")}></slot>
 				</div>
-				<footer class="action-items"><slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot></footer>
+				<footer class="action-items"><slot name="action-items"  ${slotted(
+    "actionItemsSlottedContent"
+  )}></slot></footer>
 			</div>
 		</${popupTag}>
 	</template>`;
@@ -65,7 +67,11 @@ const menuDefinition = Menu.compose({
   template: MenuTemplate,
   styles
 });
-const menuRegistries = [menuDefinition(), ...popupRegistries, ...menuItemRegistries];
+const menuRegistries = [
+  menuDefinition(),
+  ...popupRegistries,
+  ...menuItemRegistries
+];
 const registerMenu = registerFactory(menuRegistries);
 
 export { menuRegistries as a, menuDefinition as m, registerMenu as r };

package/shared/definition3.cjs

@@ -42,21 +42,18 @@ __decorateClass([
   index.attr({ attribute: "aria-label" })
 ], ActionGroup.prototype, "ariaLabel", 2);
 
-const getClasses = ({
-  appearance,
-  shape,
-  tight
-}) => classNames.classNames(
+const getClasses = ({ appearance, shape, tight }) => classNames.classNames(
   "base",
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
   ["tight", tight]
 );
-const ActionGroupTemplate = () => index.html`
-<div class="${getClasses}" 
-	role="${(x) => x.role ? x.role : "group"}" 
-	aria-label="${(x) => x.ariaLabel}">
-  <slot></slot>
+const ActionGroupTemplate = () => index.html` <div
+	class="${getClasses}"
+	role="${(x) => x.role ? x.role : "group"}"
+	aria-label="${(x) => x.ariaLabel}"
+>
+	<slot></slot>
 </div>`;
 
 const actionGroupDefinition = ActionGroup.compose({

package/shared/definition3.js

@@ -40,21 +40,18 @@ __decorateClass([
   attr({ attribute: "aria-label" })
 ], ActionGroup.prototype, "ariaLabel", 2);
 
-const getClasses = ({
-  appearance,
-  shape,
-  tight
-}) => classNames(
+const getClasses = ({ appearance, shape, tight }) => classNames(
   "base",
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
   ["tight", tight]
 );
-const ActionGroupTemplate = () => html`
-<div class="${getClasses}" 
-	role="${(x) => x.role ? x.role : "group"}" 
-	aria-label="${(x) => x.ariaLabel}">
-  <slot></slot>
+const ActionGroupTemplate = () => html` <div
+	class="${getClasses}"
+	role="${(x) => x.role ? x.role : "group"}"
+	aria-label="${(x) => x.ariaLabel}"
+>
+	<slot></slot>
 </div>`;
 
 const actionGroupDefinition = ActionGroup.compose({