@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition26.cjs

@@ -7,23 +7,24 @@ const when = require('./when.cjs');
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-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))))}.control.size--5{--_icon-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--4{--_icon-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--3{--_icon-block-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--2{--_icon-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--1{--_icon-block-size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-0{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-1{--_icon-block-size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-2{--_icon-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-3{--_icon-block-size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-4{--_icon-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-5{--_icon-block-size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}\n";
 
-const getClasses = ({
-  connotation,
-  size
-}) => classNames.classNames(
+const getClasses = ({ connotation, size }) => classNames.classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, Boolean(size)]
 );
 const iconTemplate = () => index.html`
-
 	<figure class="${getClasses}">
 		<slot>
-			${when.when((x) => !x.iconLoaded, index.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}"/>`)}
-			${when.when((x) => x.iconLoaded && x._svg, (x) => index.html`${x._svg}`)}
+			${when.when(
+  (x) => !x.iconLoaded,
+  index.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+)}
+			${when.when(
+  (x) => x.iconLoaded && x._svg,
+  (x) => index.html`${x._svg}`
+)}
 		</slot>
 	</figure>
-
 `;
 
 const iconDefinition = icon.Icon.compose({

package/shared/definition26.js

@@ -5,23 +5,24 @@ import { w as when } from './when.js';
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-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))))}.control.size--5{--_icon-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--4{--_icon-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--3{--_icon-block-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--2{--_icon-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--1{--_icon-block-size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-0{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-1{--_icon-block-size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-2{--_icon-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-3{--_icon-block-size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-4{--_icon-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-5{--_icon-block-size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}\n";
 
-const getClasses = ({
-  connotation,
-  size
-}) => classNames(
+const getClasses = ({ connotation, size }) => classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, Boolean(size)]
 );
 const iconTemplate = () => html`
-
 	<figure class="${getClasses}">
 		<slot>
-			${when((x) => !x.iconLoaded, html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}"/>`)}
-			${when((x) => x.iconLoaded && x._svg, (x) => html`${x._svg}`)}
+			${when(
+  (x) => !x.iconLoaded,
+  html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+)}
+			${when(
+  (x) => x.iconLoaded && x._svg,
+  (x) => html`${x._svg}`
+)}
 		</slot>
 	</figure>
-
 `;
 
 const iconDefinition = Icon.compose({

package/shared/definition27.cjs

@@ -45,13 +45,15 @@ const getClasses = ({
   [`column-basis-${columnBasis}`, Boolean(columnBasis)],
   [`gutters-${gutters}`, Boolean(gutters)],
   [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
-  [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)],
+  [
+    `row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`,
+    Boolean(rowSpacing) || Boolean(columnSpacing)
+  ],
   [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
 );
-const layoutTemplate = () => index.html`
-        <div class="${getClasses}">
-			<slot></slot>
-		</div>`;
+const layoutTemplate = () => index.html` <div class="${getClasses}">
+	<slot></slot>
+</div>`;
 
 const layoutDefinition = Layout.compose({
   baseName: "layout",

package/shared/definition27.js

@@ -43,13 +43,15 @@ const getClasses = ({
   [`column-basis-${columnBasis}`, Boolean(columnBasis)],
   [`gutters-${gutters}`, Boolean(gutters)],
   [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
-  [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)],
+  [
+    `row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`,
+    Boolean(rowSpacing) || Boolean(columnSpacing)
+  ],
   [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
 );
-const layoutTemplate = () => html`
-        <div class="${getClasses}">
-			<slot></slot>
-		</div>`;
+const layoutTemplate = () => html` <div class="${getClasses}">
+	<slot></slot>
+</div>`;
 
 const layoutDefinition = Layout.compose({
   baseName: "layout",

package/shared/definition28.cjs

@@ -3,13 +3,13 @@
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
 const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
+const anchored = require('./anchored.cjs');
 const startEnd = require('./start-end.cjs');
 const direction = require('./direction.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const keyCodes = require('./key-codes.cjs');
-const icon = require('./icon.cjs');
-const anchored = require('./anchored.cjs');
 const dom = require('./dom.cjs');
+const icon = require('./icon.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -570,7 +570,7 @@ index.__decorate([
     index.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;
@@ -583,109 +583,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([
-  index.attr
-], MenuItem.prototype, "text", 2);
-__decorateClass$1([
-  index.attr({ attribute: "text-secondary" })
-], MenuItem.prototype, "textSecondary", 2);
-__decorateClass$1([
-  index.attr({ mode: "boolean", attribute: "check-trailing" })
-], MenuItem.prototype, "checkTrailing", 2);
-__decorateClass$1([
-  index.attr({ attribute: "check-appearance" })
-], MenuItem.prototype, "checkedAppearance", 2);
-__decorateClass$1([
-  index.observable
-], MenuItem.prototype, "metaSlottedContent", 2);
-__decorateClass$1([
-  index.observable
-], MenuItem.prototype, "trailingMetaSlottedContent", 2);
-__decorateClass$1([
-  index.observable
-], MenuItem.prototype, "slottedSubmenu", 2);
-applyMixins.applyMixins(MenuItem, affix.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;
 exports.Menu = class Menu 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)
         index.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;
       }
@@ -695,70 +647,156 @@ exports.Menu = class Menu 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([
   index.attr({ attribute: "aria-label" })
 ], exports.Menu.prototype, "ariaLabel", 2);
-__decorateClass([
+__decorateClass$1([
   index.attr({ mode: "fromView" })
 ], exports.Menu.prototype, "placement", 2);
-__decorateClass([
+__decorateClass$1([
   index.attr({ mode: "boolean", attribute: "auto-dismiss" })
 ], exports.Menu.prototype, "autoDismiss", 2);
-__decorateClass([
+__decorateClass$1([
   index.attr({ mode: "boolean" })
 ], exports.Menu.prototype, "open", 2);
-__decorateClass([
+__decorateClass$1([
   index.observable
 ], exports.Menu.prototype, "headerSlottedContent", 2);
-__decorateClass([
+__decorateClass$1([
   index.observable
 ], exports.Menu.prototype, "actionItemsSlottedContent", 2);
-exports.Menu = __decorateClass([
+exports.Menu = __decorateClass$1([
   anchored.anchored
 ], exports.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([
+  index.attr
+], MenuItem.prototype, "text", 2);
+__decorateClass([
+  index.attr({ attribute: "text-secondary" })
+], MenuItem.prototype, "textSecondary", 2);
+__decorateClass([
+  index.attr
+], MenuItem.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ mode: "boolean", attribute: "check-trailing" })
+], MenuItem.prototype, "checkTrailing", 2);
+__decorateClass([
+  index.attr({ attribute: "check-appearance" })
+], MenuItem.prototype, "checkedAppearance", 2);
+__decorateClass([
+  index.observable
+], MenuItem.prototype, "metaSlottedContent", 2);
+__decorateClass([
+  index.observable
+], MenuItem.prototype, "trailingMetaSlottedContent", 2);
+__decorateClass([
+  index.observable
+], MenuItem.prototype, "slottedSubmenu", 2);
+applyMixins.applyMixins(MenuItem, affix.AffixIcon);
+
 const getIndicatorIcon = (x) => {
   if (x.checkedAppearance === CheckAppearance.TickOnly) {
     return x.checked ? "check-line" : "";
@@ -768,6 +806,7 @@ const getIndicatorIcon = (x) => {
   return `${iconType}-${iconStatus}-2-line`;
 };
 const getClasses = ({
+  connotation,
   disabled,
   checked,
   role,
@@ -778,9 +817,13 @@ const getClasses = ({
   checkTrailing
 }) => classNames.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)],
@@ -801,8 +844,14 @@ function text() {
   return index.html`${when.when(
     (x) => x.text || x.textSecondary,
     index.html`<span class="text">
-			${when.when((x) => x.text, index.html`<span class="text-primary">${(x) => x.text}</span>`)}
-			${when.when((x) => x.textSecondary, index.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`)}
+			${when.when(
+      (x) => x.text,
+      index.html`<span class="text-primary">${(x) => x.text}</span>`
+    )}
+			${when.when(
+      (x) => x.textSecondary,
+      index.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
+    )}
 		</span>`
   )}`;
 }
@@ -810,27 +859,44 @@ const MenuItemTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(icon.Icon);
   return index.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.slotted("metaSlottedContent")}></slot>
-			${checkIndicator(context)}
-			${when.when((x) => x.icon, index.html`<span class="decorative">${(x) => affixIconTemplate(x.icon)}</span>`)}
-			${text()}
-			<slot name="trailing-meta" ${slotted.slotted("trailingMetaSlottedContent")}></slot>
-			${when.when((x) => x.hasSubmenu, index.html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
-		</div>
-		<slot name="submenu" ${slotted.slotted({ property: "slottedSubmenu", filter: slotted.elements(context.tagFor(exports.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.slotted("metaSlottedContent")}></slot>
+				${checkIndicator(context)}
+				${when.when(
+    (x) => x.icon,
+    index.html`<span class="decorative"
+						>${(x) => affixIconTemplate(x.icon)}</span
+					>`
+  )}
+				${text()}
+				<slot
+					name="trailing-meta"
+					${slotted.slotted("trailingMetaSlottedContent")}
+				></slot>
+				${when.when(
+    (x) => x.hasSubmenu,
+    index.html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`
+  )}
+			</div>
+			<slot
+				name="submenu"
+				${slotted.slotted({
+    property: "slottedSubmenu",
+    filter: slotted.elements(context.tagFor(exports.Menu))
+  })}
+			></slot>
+		</template>
 	`;
 };