@vonage/vivid 5.15.1 → 5.16.0

package/bundled/definition8.js

@@ -1,135 +1,153 @@
-import { I as m, i as u } from "./definition2.js";
-import { V as f, a as d, o as p, h as s, c as x, d as k } from "./vivid-element.js";
-import { W as y, f as _ } from "./mixins.js";
-import { D as g, d as C } from "./delegates-aria.js";
-import { C as w } from "./form-associated.js";
-import { W as $ } from "./with-error-text.js";
-import { W as z } from "./with-success-text.js";
-import { F as O } from "./form-element.js";
-import { w as v } from "./when.js";
-import { s as F } from "./slotted.js";
-import { c as T } from "./class-names.js";
-const B = ':host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media(hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}';
-var D = Object.defineProperty, c = (o, a, e, n) => {
-  for (var r = void 0, i = o.length - 1, l; i >= 0; i--)
-    (l = o[i]) && (r = l(a, e, r) || r);
-  return r && D(a, e, r), r;
+import { T as e, d as t, l as n, o as r, s as i, t as a, u as o } from "./vivid-element.js";
+import { t as s } from "./ref.js";
+import { t as c } from "./when.js";
+import { t as l } from "./decorate.js";
+import { t as u } from "./class-names.js";
+import { i as d, t as f } from "./definition6.js";
+import { r as p, t as m } from "./definition7.js";
+import { a as h, c as g, i as _, l as v, n as y, o as b, r as x, s as S, t as C, u as w } from "./floating-ui.dom.js";
+//#region src/lib/popup/popup.ts
+var T = {
+	Flip: "flip",
+	AutoPlacementHorizontal: "auto-placement-horizontal",
+	AutoPlacementVertical: "auto-placement-vertical"
+}, E = {
+	[T.Flip]: h(),
+	[T.AutoPlacementHorizontal]: y({ allowedPlacements: [
+		"bottom",
+		"top",
+		"bottom-start",
+		"bottom-end",
+		"top-start",
+		"top-end"
+	] }),
+	[T.AutoPlacementVertical]: y({ allowedPlacements: [
+		"left",
+		"right",
+		"left-start",
+		"left-end",
+		"right-start",
+		"right-end"
+	] })
+}, D = class extends a {
+	constructor(...e) {
+		super(...e), this.open = !1, this.dismissible = !1, this.arrow = !1, this.alternate = !1, this.placementStrategy = T.Flip, this.animationFrame = !1, this.strategy = "fixed", this.offset = null;
+	}
+	get #e() {
+		let e = [
+			S(),
+			E[this.placementStrategy],
+			b(),
+			w({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
+				Object.assign(n.floating.style, {
+					maxWidth: `${e}px`,
+					maxHeight: `${t}px`
+				});
+			} }),
+			v()
+		], t = this.offset ?? 0;
+		return this.arrow && (t += 12, e = [...e, C({
+			element: this.arrowEl,
+			padding: 10
+		})]), t > 0 && e.unshift(g(t)), e;
+	}
+	#t;
+	openChanged(e, t) {
+		this.#r(), this.#n(), this.$emit(t ? "vwc-popup:open" : "vwc-popup:close");
+	}
+	animationFrameChanged() {
+		this.#n();
+	}
+	anchorChanged() {
+		this.#n();
+	}
+	strategyChanged() {
+		this.#r();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#r(), this.#n();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#n();
+	}
+	#n() {
+		this.#t?.(), this.isConnected && (this.open && this.controlEl && this.controlEl.classList.add("open"), this.anchorEl && this.open && this.popupEl && (this.#t = x(this.anchorEl, this.popupEl, this.#a, { animationFrame: this.animationFrame })));
+	}
+	#r() {
+		this.popupEl && this.strategy === "fixed" && (this.open ? this.popupEl.showPopover() : this.popupEl.hidePopover());
+	}
+	#i;
+	#a = () => (this.#i = this.updatePosition(), this.#i);
+	async updatePosition() {
+		if (!this.open || !this.anchorEl) return;
+		let e = await _(this.anchorEl, this.popupEl, {
+			placement: this.placement,
+			strategy: this.strategy,
+			middleware: this.#e
+		});
+		this.#o(e), this.arrow && this.#s(e);
+	}
+	#o(e) {
+		let { x: t, y: n } = e, { referenceHidden: r } = e.middlewareData.hide;
+		Object.assign(this.popupEl.style, {
+			left: `${t}px`,
+			top: `${n}px`,
+			visibility: r ? "hidden" : "visible"
+		});
+	}
+	#s(e) {
+		let { x: t, y: n } = e.middlewareData.arrow, r = {
+			left: "calc(100% - 4px)",
+			right: "-4px",
+			top: "calc(100% - 4px)",
+			bottom: "-4px"
+		}, i = e.placement.split("-")[0];
+		Object.assign(this.arrowEl.style, {
+			left: t ? `${t}px` : r[i],
+			top: n ? `${n}px` : r[i]
+		});
+	}
+	get anchorEl() {
+		return this.anchor ?? null;
+	}
+	show() {
+		return this.open = !0, this.#i ?? Promise.resolve();
+	}
+	hide() {
+		this.open = !1;
+	}
 };
-const E = " ";
-class t extends g(
-  y(
-    $(
-      z(O(w(f)))
-    )
-  )
-) {
-  constructor() {
-    super(), this.tabindex = null, this.proxy = document.createElement("input"), this.initialValue = "on", this.defaultSlottedNodes = [], this.indeterminate = !1, this.keypressHandler = (a) => a.target instanceof HTMLAnchorElement ? !0 : (!this.disabled && !this.readOnly && a.key === E && (this.indeterminate && (this.indeterminate = !1), this.checked = !this.checked), !1), this.clickHandler = (a) => a.target instanceof HTMLAnchorElement ? !0 : (!this.disabled && !this.readOnly && (this.indeterminate && (this.indeterminate = !1), this.checked = !this.checked), !1), this.proxy.setAttribute("type", "checkbox");
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
-  }
-  /**
-   * @internal
-   */
-  ariaCheckedChanged(a, e) {
-    super.ariaCheckedChanged(a, e), this.ariaChecked === "mixed" ? this.indeterminate = !0 : (this.indeterminate = !1, this.checked = this.ariaChecked === "true");
-  }
-  /**
-   * @internal
-   */
-  checkedChanged(a, e) {
-    super.checkedChanged(a, e), this.ariaChecked = e == !0 ? "true" : "false", a !== void 0 && this.$emit("input");
-  }
+l([n({ mode: "boolean" })], D.prototype, "open", void 0), l([n({ mode: "boolean" })], D.prototype, "dismissible", void 0), l([n({ mode: "boolean" })], D.prototype, "arrow", void 0), l([n({ mode: "boolean" })], D.prototype, "alternate", void 0), l([n({ mode: "fromView" })], D.prototype, "placement", void 0), l([n({
+	mode: "boolean",
+	attribute: "animation-frame"
+})], D.prototype, "animationFrame", void 0), l([n({ mode: "fromView" })], D.prototype, "strategy", void 0), l([n({
+	attribute: "offset",
+	converter: o
+})], D.prototype, "offset", void 0), l([e], D.prototype, "anchor", void 0);
+//#endregion
+//#region src/lib/popup/popup.scss?inline
+var O = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}", k = ({ open: e, dismissible: t, alternate: n }) => u("control", ["open", !!e], ["dismissible", !!t], ["alternate", !!n]);
+function A(e) {
+	return e.strategy && e.strategy === "fixed" ? "manual" : null;
 }
-c([
-  d({ attribute: "tabindex" })
-], t.prototype, "tabindex");
-c([
-  d
-], t.prototype, "connotation");
-c([
-  d({ attribute: "readonly", mode: "boolean" })
-], t.prototype, "readOnly");
-c([
-  p
-], t.prototype, "defaultSlottedNodes");
-c([
-  d({ attribute: "indeterminate", mode: "boolean" })
-], t.prototype, "indeterminate");
-c([
-  p
-], t.prototype, "slottedContent");
-const H = ({
-  connotation: o,
-  readOnly: a,
-  checked: e,
-  disabled: n,
-  indeterminate: r,
-  errorValidationMessage: i,
-  successText: l,
-  label: b,
-  slottedContent: h
-}) => T(
-  "base",
-  [`connotation-${o}`, !!o],
-  ["readonly", !!a],
-  ["checked", !!e || !!r],
-  ["disabled", !!n],
-  ["error connotation-alert", !!i],
-  ["success connotation-success", !!l],
-  ["hide-label", !b && !h?.length]
-), A = (o) => {
-  const a = o.tagFor(m);
-  return s`<template>
-		<div
-			class="${H}"
-			aria-describedby="${(e) => e._feedbackDescribedBy}"
-			${C({
-    role: "checkbox",
-    ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
-    ariaRequired: (e) => e.required,
-    ariaDisabled: (e) => e.disabled,
-    ariaReadOnly: (e) => e.readOnly
-  })}
-			tabindex="${(e) => e.tabindex !== null ? e.tabindex : e.disabled ? null : 0}"
-			@keypress="${(e, n) => e.keypressHandler(n.event)}"
-			@click="${(e, n) => e.clickHandler(n.event)}"
-		>
-			<div class="control">
-				${v(
-    (e) => e.checked && !e.indeterminate,
-    s`<${a} name="check-solid" class="icon"></${a}>`
-  )}
-				${v(
-    (e) => e.indeterminate,
-    s`<${a} name="minus-solid" class="icon"></${a}>`
-  )}
+//#endregion
+//#region src/lib/popup/definition.ts
+var j = r("popup", D, (e) => {
+	let n = e.tagFor(p), r = e.tagFor(d);
+	return t`
+  <${n}>
+		<div popover="${A}" class="popup-wrapper ${(e) => e.strategy}" ${s("popupEl")} part="popup-base">
+			<div ${s("controlEl")} class="${k}" aria-hidden="${(e) => e.open ? "false" : "true"}"
+				part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
+				<div class="popup-content">
+					<slot></slot>
+					${c((e) => e.dismissible, t`<${r} size="condensed" @click="${(e) => e.open = !1}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${r}>`)}
+				</div>
+				${c((e) => e.arrow, t`<div class="arrow" ${s("arrowEl")}></div>`)}
 			</div>
-			${s`<label
-				>${(e) => e.label}<slot ${F("slottedContent")}></slot
-			></label>`}
-		</div>
-		${(e) => e._getFeedbackTemplate(o)}
-	</template>`;
-}, W = k(
-  "checkbox",
-  t,
-  A,
-  [u, _],
-  {
-    styles: B,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), J = x(W);
-export {
-  t as C,
-  W as c,
-  J as r
-};
+    </div>
+  </${n}>`;
+}, [m, f], { styles: O }), M = i(j);
+//#endregion
+export { D as i, M as n, T as r, j as t };

package/bundled/definition9.cjs

@@ -1,14 +1,30 @@
-"use strict";const m=require("./definition3.cjs"),f=require("./definition4.cjs"),r=require("./vivid-element.cjs"),s=require("./floating-ui.dom.cjs"),d=require("./ref.cjs"),h=require("./when.cjs"),g=require("./class-names.cjs");var v=Object.defineProperty,l=(i,t,o,e)=>{for(var a=void 0,p=i.length-1,u;p>=0;p--)(u=i[p])&&(a=u(t,o,a)||a);return a&&v(t,o,a),a};const c={Flip:"flip",AutoPlacementHorizontal:"auto-placement-horizontal",AutoPlacementVertical:"auto-placement-vertical"},w={[c.Flip]:s.flip(),[c.AutoPlacementHorizontal]:s.autoPlacement({allowedPlacements:["bottom","top","bottom-start","bottom-end","top-start","top-end"]}),[c.AutoPlacementVertical]:s.autoPlacement({allowedPlacements:["left","right","left-start","left-end","right-start","right-end"]})};class n extends r.VividElement{constructor(){super(...arguments),this.open=!1,this.dismissible=!1,this.arrow=!1,this.alternate=!1,this.placementStrategy=c.Flip,this.animationFrame=!1,this.strategy="fixed",this.offset=null,this.#a=()=>(this.#o=this.updatePosition(),this.#o)}get#i(){let t=[s.inline(),w[this.placementStrategy],s.hide(),s.size({apply({availableWidth:e,availableHeight:a,elements:p}){Object.assign(p.floating.style,{maxWidth:`${e}px`,maxHeight:`${a}px`})}}),s.shift()],o=this.offset??0;return this.arrow&&(o+=12,t=[...t,s.arrow({element:this.arrowEl,padding:10})]),o>0&&t.unshift(s.offset(o)),t}#r;openChanged(t,o){this.#e(),this.#t(),this.$emit(o?"vwc-popup:open":"vwc-popup:close")}animationFrameChanged(){this.#t()}anchorChanged(){this.#t()}strategyChanged(){this.#e()}connectedCallback(){super.connectedCallback(),this.#e(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#t()}#t(){this.#r?.(),this.open&&this.controlEl&&this.controlEl.classList.add("open"),this.anchorEl&&this.open&&this.popupEl&&(this.#r=s.autoUpdate(this.anchorEl,this.popupEl,this.#a,{animationFrame:this.animationFrame}))}#e(){this.popupEl&&this.strategy==="fixed"&&(this.open?this.popupEl.showPopover():this.popupEl.hidePopover())}#o;#a;async updatePosition(){if(!this.open||!this.anchorEl)return;const t=await s.computePosition(this.anchorEl,this.popupEl,{placement:this.placement,strategy:this.strategy,middleware:this.#i});this.#s(t),this.arrow&&this.#n(t)}#s(t){const{x:o,y:e}=t,{referenceHidden:a}=t.middlewareData.hide;Object.assign(this.popupEl.style,{left:`${o}px`,top:`${e}px`,visibility:a?"hidden":"visible"})}#n(t){const{x:o,y:e}=t.middlewareData.arrow,a={left:"calc(100% - 4px)",right:"-4px",top:"calc(100% - 4px)",bottom:"-4px"},p=t.placement.split("-")[0];Object.assign(this.arrowEl.style,{left:o?`${o}px`:a[p],top:e?`${e}px`:a[p]})}get anchorEl(){return this.anchor??null}show(){return this.open=!0,this.#o??Promise.resolve()}hide(){this.open=!1}}l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"dismissible");l([r.attr({mode:"boolean"})],n.prototype,"arrow");l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"fromView"})],n.prototype,"placement");l([r.attr({mode:"boolean",attribute:"animation-frame"})],n.prototype,"animationFrame");l([r.attr({mode:"fromView"})],n.prototype,"strategy");l([r.attr({attribute:"offset",converter:r.nullableNumberConverter})],n.prototype,"offset");l([r.observable],n.prototype,"anchor");const y=":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}",x=({open:i,dismissible:t,alternate:o})=>g.classNames("control",["open",!!i],["dismissible",!!t],["alternate",!!o]);function P(i){return i.strategy&&i.strategy==="fixed"?"manual":null}const $=i=>{const t=i.tagFor(f.Elevation),o=i.tagFor(m.Button);return r.html`
-  <${t}>
-		<div popover="${P}" class="popup-wrapper ${e=>e.strategy}" ${d.ref("popupEl")} part="popup-base">
-			<div ${d.ref("controlEl")} class="${x}" aria-hidden="${e=>e.open?"false":"true"}"
-				part="${e=>e.alternate?"vvd-theme-alternate":""}">
-				<div class="popup-content">
-					<slot></slot>
-					${h.when(e=>e.dismissible,r.html`<${o} size="condensed" @click="${e=>e.open=!1}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${o}>`)}
-				</div>
-				${h.when(e=>e.arrow,r.html`<div class="arrow" ${d.ref("arrowEl")}></div>`)}
+const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./slotted.cjs`),r=require(`./definition2.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./key-codes.cjs`),s=require(`./affix.cjs`),c=require(`./host-semantics.cjs`);var l=`: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}@media (hover:hover){.base: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.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:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected: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.selected.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{--_menu-item-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);border-radius:8px;align-items:center;inline-size:100%;display:flex}.base:not(.two-lines){min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));padding-block:8px;padding-inline:var(--_menu-item-padding-inline);gap:12px}.base.two-lines{min-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));padding-block:12px;padding-inline:var(--_menu-item-padding-inline);gap:16px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);flex-shrink:0;line-height:1}.action,.decorative{place-content:center;display:flex}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[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{flex-direction:column;gap:4px;margin-inline-end:auto;display:flex;overflow:hidden}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.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)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size,var--vvd-typography-base)}`,u={menuitem:`menuitem`,menuitemcheckbox:`menuitemcheckbox`,menuitemradio:`menuitemradio`,presentation:`presentation`},d=class extends c.t(s.t(e.t)){expandedChanged(){this.$fastController.isConnected&&(this.submenu&&!this.expanded&&this.submenu.collapseExpandedItem(),this.$emit(`expanded-change`,this,{bubbles:!1}))}#e(){this._isPresentational?this.role===`menuitem`&&(this.role=`presentation`):this.role===`presentation`&&(this.role=u.menuitem)}_isPresentationalChanged(){this.$fastController.isConnected&&this.#e()}checkedChanged(){this.$fastController.isConnected&&this.$emit(`change`)}connectedCallback(){super.connectedCallback(),e.O.enqueue(()=>{this._isPresentational=this._isPresentational??!0,this.#e()})}slottedSubmenuChanged(){this.submenu&&(this.submenu.anchor=this,this.submenu.placement=`right-start`,this.submenu.collapseExpandedItem=()=>this.#t(),this.submenu._popupOffset=5)}get submenu(){return this.slottedSubmenu?.length?this.slottedSubmenu[0]:null}get hasSubmenu(){return this.submenu!==null}constructor(){super(),this.role=u.menuitem,this.checked=!1,this.handleMenuItemClick=e=>this._isSyntheticClickEvent(e)?!0:(this.invoke(),!!this._isPresentational),this.handleMouseOver=e=>(this.disabled||!this.submenu||this.expanded||(this.expanded=!0),!1),this.handleMouseOut=e=>(!this.expanded||this.contains(document.activeElement)||(this.expanded=!1),!1),this.invoke=()=>{if(!(this.disabled||this._isPresentational))switch(this.controlType){case`checkbox`:this.checked=!this.checked;break;case`radio`:this.checked||=!0;break;default:this.submenu?this.expanded=!0:this.$emit(`change`);break}},this.checkTrailing=!1,this.handleMenuItemKeyDown=e=>{if(e.defaultPrevented)return!1;switch(e.key){case o.a:case` `:return this.invoke(),this.disabled||this.#i(),!1;case o.r:return this.submenu&&(this.expanded=!0,this.#i()),!1;case o.n:if(this.expanded)return this.#i(),this.expanded=!1,this.focus(),!1}return!0},this.addEventListener(`expanded-change`,this.#n)}#t(){this.expanded=!1}#n(){this.submenu&&(this.submenu.open=this.expanded)}#r=new WeakSet;_isSyntheticClickEvent(e){return this.#r.has(e)}#i(){let e=new MouseEvent(`click`,{bubbles:!0,composed:!0});this.#r.add(e),this.dispatchEvent(e)}};i.t([e.l({mode:`boolean`})],d.prototype,`disabled`,void 0),i.t([e.l({mode:`boolean`})],d.prototype,`expanded`,void 0),i.t([e.T],d.prototype,`_isPresentational`,void 0),i.t([e.n({deprecatedPropertyName:`role`,fromDeprecated:e=>{switch(e){case`menuitemcheckbox`:return`checkbox`;case`menuitemradio`:return`radio`;default:return}},toDeprecated:e=>{switch(e){case`checkbox`:return`menuitemcheckbox`;case`radio`:return`menuitemradio`;default:return`menuitem`}}}),e.l({attribute:`control-type`})],d.prototype,`controlType`,void 0),i.t([e.l({mode:`boolean`})],d.prototype,`checked`,void 0),i.t([e.l],d.prototype,`text`,void 0),i.t([e.l({attribute:`text-secondary`})],d.prototype,`textSecondary`,void 0),i.t([e.l],d.prototype,`connotation`,void 0),i.t([e.l({mode:`boolean`,attribute:`check-trailing`})],d.prototype,`checkTrailing`,void 0),i.t([e.l({attribute:`check-appearance`})],d.prototype,`checkedAppearance`,void 0),i.t([e.T],d.prototype,`metaSlottedContent`,void 0),i.t([e.T],d.prototype,`trailingMetaSlottedContent`,void 0),i.t([e.T],d.prototype,`slottedSubmenu`,void 0);var f=`menu`,p=e=>e.checkedAppearance===`tick-only`?e.checked?`check-line`:``:`${e.controlType===`checkbox`?`checkbox`:`radio`}-${e.checked?`checked`:`unchecked`}-2-line`,m=({connotation:e,disabled:t,checked:n,controlType:r,text:i,textSecondary:o,icon:s,metaSlottedContent:c,checkTrailing:l})=>a.t(`base`,[`connotation-${e}`,!!e],[`disabled`,!!t],[`selected`,!!(r&&n)],[`trailing`,!!(r&&(l||s))],[`item-checkbox`,r===`checkbox`],[`item-radio`,r===`radio`],[`two-lines`,!!i?.length&&!!o?.length],[`has-meta`,!!c?.length]);function h(n){let i=n.tagFor(r.r);return e.d`${t.t(e=>!!e.controlType,e.d`<span class="action"><${i} class="icon" name="${e=>p(e)}"></${i}></span>`)}`}function g(){return e.d`${t.t(e=>e.text||e.textSecondary,e.d`<span class="text">
+			${t.t(e=>e.text,e.d`<span class="text-primary">${e=>e.text}</span>`)}
+			${t.t(e=>e.textSecondary,e.d`<span class="text-secondary">${e=>e.textSecondary}</span>`)}
+		</span>`)}`}var _=e.o(`menu-item`,d,i=>{let a=s.a(i),o=i.tagFor(r.r);return e.d`
+		<template
+			${c.n({role:u.menuitem,ariaHasPopup:e=>e.hasSubmenu?`menu`:void 0,ariaChecked:e=>e.controlType?e.checked:void 0,ariaDisabled:e=>e.disabled,ariaExpanded:e=>e.expanded})}
+			@keydown="${(e,t)=>e.handleMenuItemKeyDown(t.event)}"
+			@click="${(e,t)=>e.handleMenuItemClick(t.event)}"
+			@mouseover="${(e,t)=>e.handleMouseOver(t.event)}"
+			@mouseout="${(e,t)=>e.handleMouseOut(t.event)}"
+		>
+			<div class="${m}">
+				<slot name="meta" ${n.t(`metaSlottedContent`)}></slot>
+				${h(i)}
+				${t.t(e=>e.icon,e.d`<span class="decorative"
+						>${e=>a(e.icon)}</span
+					>`)}
+				${g()}
+				<slot
+					name="trailing-meta"
+					${n.t(`trailingMetaSlottedContent`)}
+				></slot>
+				${t.t(e=>e.hasSubmenu,e.d`<${o} class="chevron" name="chevron-right-line"></${o}>`)}
 			</div>
-    </div>
-  </${t}>`},b=r.defineVividComponent("popup",n,$,[f.elevationDefinition,m.buttonDefinition],{styles:y}),E=r.createRegisterFunction(b);exports.PlacementStrategy=c;exports.Popup=n;exports.popupDefinition=b;exports.registerPopup=E;
+			<slot
+				name="submenu"
+				${n.t({property:`slottedSubmenu`,filter:n.r(i.tagForNonDependency(f))})}
+			></slot>
+		</template>
+	`},[r.t],{styles:l}),v=e.s(_);Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});