@fluentui/web-components 3.0.0-beta.32 → 3.0.0-beta.34

package/dist/web-components.js

@@ -2233,26 +2233,6 @@ HTMLDirective.define(RefDirective);
  */
 const ref = propertyName => new RefDirective(propertyName);
 
-const noTemplate = () => null;
-function normalizeBinding(value) {
-  return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
-}
-/**
- * A directive that enables basic conditional rendering in a template.
- * @param condition - The condition to test for rendering.
- * @param templateOrTemplateBinding - The template or a binding that gets
- * the template to render when the condition is true.
- * @param elseTemplateOrTemplateBinding - Optional template or binding that that
- * gets the template to render when the conditional is false.
- * @public
- */
-function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
-  const dataBinding = isFunction(condition) ? condition : () => condition;
-  const templateBinding = normalizeBinding(templateOrTemplateBinding);
-  const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
-  return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : elseBinding(source, context);
-}
-
 const selectElements = value => value.nodeType === 1;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -6762,921 +6742,6 @@ const definition$f = MenuButton.compose({
 
 definition$f.define(FluentDesignSystem.registry);
 
-function t(t) {
-  return t.split("-")[1];
-}
-function e(t) {
-  return "y" === t ? "height" : "width";
-}
-function n$1(t) {
-  return t.split("-")[0];
-}
-function o$1(t) {
-  return ["top", "bottom"].includes(n$1(t)) ? "x" : "y";
-}
-function r$1(r, i, a) {
-  let {
-    reference: l,
-    floating: s
-  } = r;
-  const c = l.x + l.width / 2 - s.width / 2,
-    f = l.y + l.height / 2 - s.height / 2,
-    u = o$1(i),
-    m = e(u),
-    g = l[m] / 2 - s[m] / 2,
-    d = "x" === u;
-  let p;
-  switch (n$1(i)) {
-    case "top":
-      p = {
-        x: c,
-        y: l.y - s.height
-      };
-      break;
-    case "bottom":
-      p = {
-        x: c,
-        y: l.y + l.height
-      };
-      break;
-    case "right":
-      p = {
-        x: l.x + l.width,
-        y: f
-      };
-      break;
-    case "left":
-      p = {
-        x: l.x - s.width,
-        y: f
-      };
-      break;
-    default:
-      p = {
-        x: l.x,
-        y: l.y
-      };
-  }
-  switch (t(i)) {
-    case "start":
-      p[u] -= g * (a && d ? -1 : 1);
-      break;
-    case "end":
-      p[u] += g * (a && d ? -1 : 1);
-  }
-  return p;
-}
-const i$1 = async (t, e, n) => {
-  const {
-      placement: o = "bottom",
-      strategy: i = "absolute",
-      middleware: a = [],
-      platform: l
-    } = n,
-    s = a.filter(Boolean),
-    c = await (null == l.isRTL ? void 0 : l.isRTL(e));
-  let f = await l.getElementRects({
-      reference: t,
-      floating: e,
-      strategy: i
-    }),
-    {
-      x: u,
-      y: m
-    } = r$1(f, o, c),
-    g = o,
-    d = {},
-    p = 0;
-  for (let n = 0; n < s.length; n++) {
-    const {
-        name: a,
-        fn: h
-      } = s[n],
-      {
-        x: y,
-        y: x,
-        data: w,
-        reset: v
-      } = await h({
-        x: u,
-        y: m,
-        initialPlacement: o,
-        placement: g,
-        strategy: i,
-        middlewareData: d,
-        rects: f,
-        platform: l,
-        elements: {
-          reference: t,
-          floating: e
-        }
-      });
-    u = null != y ? y : u, m = null != x ? x : m, d = {
-      ...d,
-      [a]: {
-        ...d[a],
-        ...w
-      }
-    }, v && p <= 50 && (p++, "object" == typeof v && (v.placement && (g = v.placement), v.rects && (f = !0 === v.rects ? await l.getElementRects({
-      reference: t,
-      floating: e,
-      strategy: i
-    }) : v.rects), ({
-      x: u,
-      y: m
-    } = r$1(f, g, c))), n = -1);
-  }
-  return {
-    x: u,
-    y: m,
-    placement: g,
-    strategy: i,
-    middlewareData: d
-  };
-};
-function a$1(t) {
-  return "number" != typeof t ? function (t) {
-    return {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      ...t
-    };
-  }(t) : {
-    top: t,
-    right: t,
-    bottom: t,
-    left: t
-  };
-}
-function l$1(t) {
-  return {
-    ...t,
-    top: t.y,
-    left: t.x,
-    right: t.x + t.width,
-    bottom: t.y + t.height
-  };
-}
-async function s$1(t, e) {
-  var n;
-  void 0 === e && (e = {});
-  const {
-      x: o,
-      y: r,
-      platform: i,
-      rects: s,
-      elements: c,
-      strategy: f
-    } = t,
-    {
-      boundary: u = "clippingAncestors",
-      rootBoundary: m = "viewport",
-      elementContext: g = "floating",
-      altBoundary: d = !1,
-      padding: p = 0
-    } = e,
-    h = a$1(p),
-    y = c[d ? "floating" === g ? "reference" : "floating" : g],
-    x = l$1(await i.getClippingRect({
-      element: null == (n = await (null == i.isElement ? void 0 : i.isElement(y))) || n ? y : y.contextElement || (await (null == i.getDocumentElement ? void 0 : i.getDocumentElement(c.floating))),
-      boundary: u,
-      rootBoundary: m,
-      strategy: f
-    })),
-    w = "floating" === g ? {
-      ...s.floating,
-      x: o,
-      y: r
-    } : s.reference,
-    v = await (null == i.getOffsetParent ? void 0 : i.getOffsetParent(c.floating)),
-    b = (await (null == i.isElement ? void 0 : i.isElement(v))) && (await (null == i.getScale ? void 0 : i.getScale(v))) || {
-      x: 1,
-      y: 1
-    },
-    R = l$1(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
-      rect: w,
-      offsetParent: v,
-      strategy: f
-    }) : w);
-  return {
-    top: (x.top - R.top + h.top) / b.y,
-    bottom: (R.bottom - x.bottom + h.bottom) / b.y,
-    left: (x.left - R.left + h.left) / b.x,
-    right: (R.right - x.right + h.right) / b.x
-  };
-}
-const c$1 = Math.min,
-  f$1 = Math.max;
-function u$1(t, e, n) {
-  return f$1(t, c$1(e, n));
-}
-const g$1 = ["top", "right", "bottom", "left"];
-  g$1.reduce((t, e) => t.concat(e, e + "-start", e + "-end"), []);
-  const p$1 = {
-    left: "right",
-    right: "left",
-    bottom: "top",
-    top: "bottom"
-  };
-function h$1(t) {
-  return t.replace(/left|right|bottom|top/g, t => p$1[t]);
-}
-function y$1(n, r, i) {
-  void 0 === i && (i = !1);
-  const a = t(n),
-    l = o$1(n),
-    s = e(l);
-  let c = "x" === l ? a === (i ? "end" : "start") ? "right" : "left" : "start" === a ? "bottom" : "top";
-  return r.reference[s] > r.floating[s] && (c = h$1(c)), {
-    main: c,
-    cross: h$1(c)
-  };
-}
-const x$1 = {
-  start: "end",
-  end: "start"
-};
-function w$1(t) {
-  return t.replace(/start|end/g, t => x$1[t]);
-}
-const b$1 = function (e) {
-  return void 0 === e && (e = {}), {
-    name: "flip",
-    options: e,
-    async fn(o) {
-      var r;
-      const {
-          placement: i,
-          middlewareData: a,
-          rects: l,
-          initialPlacement: c,
-          platform: f,
-          elements: u
-        } = o,
-        {
-          mainAxis: m = !0,
-          crossAxis: g = !0,
-          fallbackPlacements: d,
-          fallbackStrategy: p = "bestFit",
-          fallbackAxisSideDirection: x = "none",
-          flipAlignment: v = !0,
-          ...b
-        } = e,
-        R = n$1(i),
-        A = n$1(c) === c,
-        P = await (null == f.isRTL ? void 0 : f.isRTL(u.floating)),
-        T = d || (A || !v ? [h$1(c)] : function (t) {
-          const e = h$1(t);
-          return [w$1(t), e, w$1(e)];
-        }(c));
-      d || "none" === x || T.push(...function (e, o, r, i) {
-        const a = t(e);
-        let l = function (t, e, n) {
-          const o = ["left", "right"],
-            r = ["right", "left"],
-            i = ["top", "bottom"],
-            a = ["bottom", "top"];
-          switch (t) {
-            case "top":
-            case "bottom":
-              return n ? e ? r : o : e ? o : r;
-            case "left":
-            case "right":
-              return e ? i : a;
-            default:
-              return [];
-          }
-        }(n$1(e), "start" === r, i);
-        return a && (l = l.map(t => t + "-" + a), o && (l = l.concat(l.map(w$1)))), l;
-      }(c, v, x, P));
-      const O = [c, ...T],
-        D = await s$1(o, b),
-        E = [];
-      let L = (null == (r = a.flip) ? void 0 : r.overflows) || [];
-      if (m && E.push(D[R]), g) {
-        const {
-          main: t,
-          cross: e
-        } = y$1(i, l, P);
-        E.push(D[t], D[e]);
-      }
-      if (L = [...L, {
-        placement: i,
-        overflows: E
-      }], !E.every(t => t <= 0)) {
-        var k, B;
-        const t = ((null == (k = a.flip) ? void 0 : k.index) || 0) + 1,
-          e = O[t];
-        if (e) return {
-          data: {
-            index: t,
-            overflows: L
-          },
-          reset: {
-            placement: e
-          }
-        };
-        let n = null == (B = L.filter(t => t.overflows[0] <= 0).sort((t, e) => t.overflows[1] - e.overflows[1])[0]) ? void 0 : B.placement;
-        if (!n) switch (p) {
-          case "bestFit":
-            {
-              var C;
-              const t = null == (C = L.map(t => [t.placement, t.overflows.filter(t => t > 0).reduce((t, e) => t + e, 0)]).sort((t, e) => t[1] - e[1])[0]) ? void 0 : C[0];
-              t && (n = t);
-              break;
-            }
-          case "initialPlacement":
-            n = c;
-        }
-        if (i !== n) return {
-          reset: {
-            placement: n
-          }
-        };
-      }
-      return {};
-    }
-  };
-};
-function R$1(t, e) {
-  return {
-    top: t.top - e.height,
-    right: t.right - e.width,
-    bottom: t.bottom - e.height,
-    left: t.left - e.width
-  };
-}
-function A$1(t) {
-  return g$1.some(e => t[e] >= 0);
-}
-const P$1 = function (t) {
-    return void 0 === t && (t = {}), {
-      name: "hide",
-      options: t,
-      async fn(e) {
-        const {
-            strategy: n = "referenceHidden",
-            ...o
-          } = t,
-          {
-            rects: r
-          } = e;
-        switch (n) {
-          case "referenceHidden":
-            {
-              const t = R$1(await s$1(e, {
-                ...o,
-                elementContext: "reference"
-              }), r.reference);
-              return {
-                data: {
-                  referenceHiddenOffsets: t,
-                  referenceHidden: A$1(t)
-                }
-              };
-            }
-          case "escaped":
-            {
-              const t = R$1(await s$1(e, {
-                ...o,
-                altBoundary: !0
-              }), r.floating);
-              return {
-                data: {
-                  escapedOffsets: t,
-                  escaped: A$1(t)
-                }
-              };
-            }
-          default:
-            return {};
-        }
-      }
-    };
-  };
-function D$1(t) {
-  return "x" === t ? "y" : "x";
-}
-const E$1 = function (t) {
-    return void 0 === t && (t = {}), {
-      name: "shift",
-      options: t,
-      async fn(e) {
-        const {
-            x: r,
-            y: i,
-            placement: a
-          } = e,
-          {
-            mainAxis: l = !0,
-            crossAxis: c = !1,
-            limiter: f = {
-              fn: t => {
-                let {
-                  x: e,
-                  y: n
-                } = t;
-                return {
-                  x: e,
-                  y: n
-                };
-              }
-            },
-            ...m
-          } = t,
-          g = {
-            x: r,
-            y: i
-          },
-          d = await s$1(e, m),
-          p = o$1(n$1(a)),
-          h = D$1(p);
-        let y = g[p],
-          x = g[h];
-        if (l) {
-          const t = "y" === p ? "bottom" : "right";
-          y = u$1(y + d["y" === p ? "top" : "left"], y, y - d[t]);
-        }
-        if (c) {
-          const t = "y" === h ? "bottom" : "right";
-          x = u$1(x + d["y" === h ? "top" : "left"], x, x - d[t]);
-        }
-        const w = f.fn({
-          ...e,
-          [p]: y,
-          [h]: x
-        });
-        return {
-          ...w,
-          data: {
-            x: w.x - r,
-            y: w.y - i
-          }
-        };
-      }
-    };
-  },
-  k = function (e) {
-    return void 0 === e && (e = {}), {
-      name: "size",
-      options: e,
-      async fn(r) {
-        const {
-            placement: i,
-            rects: a,
-            platform: l,
-            elements: u
-          } = r,
-          {
-            apply: m = () => {},
-            ...g
-          } = e,
-          d = await s$1(r, g),
-          p = n$1(i),
-          h = t(i),
-          y = "x" === o$1(i),
-          {
-            width: x,
-            height: w
-          } = a.floating;
-        let v, b;
-        "top" === p || "bottom" === p ? (v = p, b = h === ((await (null == l.isRTL ? void 0 : l.isRTL(u.floating))) ? "start" : "end") ? "left" : "right") : (b = p, v = "end" === h ? "top" : "bottom");
-        const R = w - d[v],
-          A = x - d[b];
-        let P = R,
-          T = A;
-        if (y ? T = c$1(x - d.right - d.left, A) : P = c$1(w - d.bottom - d.top, R), !r.middlewareData.shift && !h) {
-          const t = f$1(d.left, 0),
-            e = f$1(d.right, 0),
-            n = f$1(d.top, 0),
-            o = f$1(d.bottom, 0);
-          y ? T = x - 2 * (0 !== t || 0 !== e ? t + e : f$1(d.left, d.right)) : P = w - 2 * (0 !== n || 0 !== o ? n + o : f$1(d.top, d.bottom));
-        }
-        await m({
-          ...r,
-          availableWidth: T,
-          availableHeight: P
-        });
-        const O = await l.getDimensions(u.floating);
-        return x !== O.width || w !== O.height ? {
-          reset: {
-            rects: !0
-          }
-        } : {};
-      }
-    };
-  };
-
-function n(t) {
-  var e;
-  return (null == (e = t.ownerDocument) ? void 0 : e.defaultView) || window;
-}
-function o(t) {
-  return n(t).getComputedStyle(t);
-}
-const i = Math.min,
-  r = Math.max,
-  l = Math.round;
-function c(t) {
-  const e = o(t);
-  let n = parseFloat(e.width),
-    i = parseFloat(e.height);
-  const r = t.offsetWidth,
-    c = t.offsetHeight,
-    s = l(n) !== r || l(i) !== c;
-  return s && (n = r, i = c), {
-    width: n,
-    height: i,
-    fallback: s
-  };
-}
-function s(t) {
-  return h(t) ? (t.nodeName || "").toLowerCase() : "";
-}
-let f;
-function u() {
-  if (f) return f;
-  const t = navigator.userAgentData;
-  return t && Array.isArray(t.brands) ? (f = t.brands.map(t => t.brand + "/" + t.version).join(" "), f) : navigator.userAgent;
-}
-function a(t) {
-  return t instanceof n(t).HTMLElement;
-}
-function d(t) {
-  return t instanceof n(t).Element;
-}
-function h(t) {
-  return t instanceof n(t).Node;
-}
-function p(t) {
-  if ("undefined" == typeof ShadowRoot) return !1;
-  return t instanceof n(t).ShadowRoot || t instanceof ShadowRoot;
-}
-function g(t) {
-  const {
-    overflow: e,
-    overflowX: n,
-    overflowY: i,
-    display: r
-  } = o(t);
-  return /auto|scroll|overlay|hidden|clip/.test(e + i + n) && !["inline", "contents"].includes(r);
-}
-function m(t) {
-  return ["table", "td", "th"].includes(s(t));
-}
-function y(t) {
-  const e = /firefox/i.test(u()),
-    n = o(t),
-    i = n.backdropFilter || n.WebkitBackdropFilter;
-  return "none" !== n.transform || "none" !== n.perspective || !!i && "none" !== i || e && "filter" === n.willChange || e && !!n.filter && "none" !== n.filter || ["transform", "perspective"].some(t => n.willChange.includes(t)) || ["paint", "layout", "strict", "content"].some(t => {
-    const e = n.contain;
-    return null != e && e.includes(t);
-  });
-}
-function x() {
-  return /^((?!chrome|android).)*safari/i.test(u());
-}
-function w(t) {
-  return ["html", "body", "#document"].includes(s(t));
-}
-function v(t) {
-  return d(t) ? t : t.contextElement;
-}
-const b = {
-  x: 1,
-  y: 1
-};
-function L(t) {
-  const e = v(t);
-  if (!a(e)) return b;
-  const n = e.getBoundingClientRect(),
-    {
-      width: o,
-      height: i,
-      fallback: r
-    } = c(e);
-  let s = (r ? l(n.width) : n.width) / o,
-    f = (r ? l(n.height) : n.height) / i;
-  return s && Number.isFinite(s) || (s = 1), f && Number.isFinite(f) || (f = 1), {
-    x: s,
-    y: f
-  };
-}
-function E(t, e, o, i) {
-  var r, l;
-  void 0 === e && (e = !1), void 0 === o && (o = !1);
-  const c = t.getBoundingClientRect(),
-    s = v(t);
-  let f = b;
-  e && (i ? d(i) && (f = L(i)) : f = L(t));
-  const u = s ? n(s) : window,
-    a = x() && o;
-  let h = (c.left + (a && (null == (r = u.visualViewport) ? void 0 : r.offsetLeft) || 0)) / f.x,
-    p = (c.top + (a && (null == (l = u.visualViewport) ? void 0 : l.offsetTop) || 0)) / f.y,
-    g = c.width / f.x,
-    m = c.height / f.y;
-  if (s) {
-    const t = n(s),
-      e = i && d(i) ? n(i) : i;
-    let o = t.frameElement;
-    for (; o && i && e !== t;) {
-      const t = L(o),
-        e = o.getBoundingClientRect(),
-        i = getComputedStyle(o);
-      e.x += (o.clientLeft + parseFloat(i.paddingLeft)) * t.x, e.y += (o.clientTop + parseFloat(i.paddingTop)) * t.y, h *= t.x, p *= t.y, g *= t.x, m *= t.y, h += e.x, p += e.y, o = n(o).frameElement;
-    }
-  }
-  return {
-    width: g,
-    height: m,
-    top: p,
-    right: h + g,
-    bottom: p + m,
-    left: h,
-    x: h,
-    y: p
-  };
-}
-function R(t) {
-  return ((h(t) ? t.ownerDocument : t.document) || window.document).documentElement;
-}
-function T(t) {
-  return d(t) ? {
-    scrollLeft: t.scrollLeft,
-    scrollTop: t.scrollTop
-  } : {
-    scrollLeft: t.pageXOffset,
-    scrollTop: t.pageYOffset
-  };
-}
-function C(t) {
-  return E(R(t)).left + T(t).scrollLeft;
-}
-function F(t) {
-  if ("html" === s(t)) return t;
-  const e = t.assignedSlot || t.parentNode || p(t) && t.host || R(t);
-  return p(e) ? e.host : e;
-}
-function W(t) {
-  const e = F(t);
-  return w(e) ? e.ownerDocument.body : a(e) && g(e) ? e : W(e);
-}
-function D(t, e) {
-  var o;
-  void 0 === e && (e = []);
-  const i = W(t),
-    r = i === (null == (o = t.ownerDocument) ? void 0 : o.body),
-    l = n(i);
-  return r ? e.concat(l, l.visualViewport || [], g(i) ? i : []) : e.concat(i, D(i));
-}
-function S(e, i, l) {
-  let c;
-  if ("viewport" === i) c = function (t, e) {
-    const o = n(t),
-      i = R(t),
-      r = o.visualViewport;
-    let l = i.clientWidth,
-      c = i.clientHeight,
-      s = 0,
-      f = 0;
-    if (r) {
-      l = r.width, c = r.height;
-      const t = x();
-      (!t || t && "fixed" === e) && (s = r.offsetLeft, f = r.offsetTop);
-    }
-    return {
-      width: l,
-      height: c,
-      x: s,
-      y: f
-    };
-  }(e, l);else if ("document" === i) c = function (t) {
-    const e = R(t),
-      n = T(t),
-      i = t.ownerDocument.body,
-      l = r(e.scrollWidth, e.clientWidth, i.scrollWidth, i.clientWidth),
-      c = r(e.scrollHeight, e.clientHeight, i.scrollHeight, i.clientHeight);
-    let s = -n.scrollLeft + C(t);
-    const f = -n.scrollTop;
-    return "rtl" === o(i).direction && (s += r(e.clientWidth, i.clientWidth) - l), {
-      width: l,
-      height: c,
-      x: s,
-      y: f
-    };
-  }(R(e));else if (d(i)) c = function (t, e) {
-    const n = E(t, !0, "fixed" === e),
-      o = n.top + t.clientTop,
-      i = n.left + t.clientLeft,
-      r = a(t) ? L(t) : {
-        x: 1,
-        y: 1
-      };
-    return {
-      width: t.clientWidth * r.x,
-      height: t.clientHeight * r.y,
-      x: i * r.x,
-      y: o * r.y
-    };
-  }(i, l);else {
-    const t = {
-      ...i
-    };
-    if (x()) {
-      var s, f;
-      const o = n(e);
-      t.x -= (null == (s = o.visualViewport) ? void 0 : s.offsetLeft) || 0, t.y -= (null == (f = o.visualViewport) ? void 0 : f.offsetTop) || 0;
-    }
-    c = t;
-  }
-  return l$1(c);
-}
-function A(t, e) {
-  return a(t) && "fixed" !== o(t).position ? e ? e(t) : t.offsetParent : null;
-}
-function H(t, e) {
-  const i = n(t);
-  let r = A(t, e);
-  for (; r && m(r) && "static" === o(r).position;) r = A(r, e);
-  return r && ("html" === s(r) || "body" === s(r) && "static" === o(r).position && !y(r)) ? i : r || function (t) {
-    let e = F(t);
-    for (; a(e) && !w(e);) {
-      if (y(e)) return e;
-      e = F(e);
-    }
-    return null;
-  }(t) || i;
-}
-function V(t, e, n) {
-  const o = a(e),
-    i = R(e),
-    r = E(t, !0, "fixed" === n, e);
-  let l = {
-    scrollLeft: 0,
-    scrollTop: 0
-  };
-  const c = {
-    x: 0,
-    y: 0
-  };
-  if (o || !o && "fixed" !== n) if (("body" !== s(e) || g(i)) && (l = T(e)), a(e)) {
-    const t = E(e, !0);
-    c.x = t.x + e.clientLeft, c.y = t.y + e.clientTop;
-  } else i && (c.x = C(i));
-  return {
-    x: r.left + l.scrollLeft - c.x,
-    y: r.top + l.scrollTop - c.y,
-    width: r.width,
-    height: r.height
-  };
-}
-const O = {
-  getClippingRect: function (t) {
-    let {
-      element: e,
-      boundary: n,
-      rootBoundary: l,
-      strategy: c
-    } = t;
-    const f = "clippingAncestors" === n ? function (t, e) {
-        const n = e.get(t);
-        if (n) return n;
-        let i = D(t).filter(t => d(t) && "body" !== s(t)),
-          r = null;
-        const l = "fixed" === o(t).position;
-        let c = l ? F(t) : t;
-        for (; d(c) && !w(c);) {
-          const t = o(c),
-            e = y(c);
-          (l ? e || r : e || "static" !== t.position || !r || !["absolute", "fixed"].includes(r.position)) ? r = t : i = i.filter(t => t !== c), c = F(c);
-        }
-        return e.set(t, i), i;
-      }(e, this._c) : [].concat(n),
-      u = [...f, l],
-      a = u[0],
-      h = u.reduce((t, n) => {
-        const o = S(e, n, c);
-        return t.top = r(o.top, t.top), t.right = i(o.right, t.right), t.bottom = i(o.bottom, t.bottom), t.left = r(o.left, t.left), t;
-      }, S(e, a, c));
-    return {
-      width: h.right - h.left,
-      height: h.bottom - h.top,
-      x: h.left,
-      y: h.top
-    };
-  },
-  convertOffsetParentRelativeRectToViewportRelativeRect: function (t) {
-    let {
-      rect: e,
-      offsetParent: n,
-      strategy: o
-    } = t;
-    const i = a(n),
-      r = R(n);
-    if (n === r) return e;
-    let l = {
-        scrollLeft: 0,
-        scrollTop: 0
-      },
-      c = {
-        x: 1,
-        y: 1
-      };
-    const f = {
-      x: 0,
-      y: 0
-    };
-    if ((i || !i && "fixed" !== o) && (("body" !== s(n) || g(r)) && (l = T(n)), a(n))) {
-      const t = E(n);
-      c = L(n), f.x = t.x + n.clientLeft, f.y = t.y + n.clientTop;
-    }
-    return {
-      width: e.width * c.x,
-      height: e.height * c.y,
-      x: e.x * c.x - l.scrollLeft * c.x + f.x,
-      y: e.y * c.y - l.scrollTop * c.y + f.y
-    };
-  },
-  isElement: d,
-  getDimensions: function (t) {
-    return a(t) ? c(t) : t.getBoundingClientRect();
-  },
-  getOffsetParent: H,
-  getDocumentElement: R,
-  getScale: L,
-  async getElementRects(t) {
-    let {
-      reference: e,
-      floating: n,
-      strategy: o
-    } = t;
-    const i = this.getOffsetParent || H,
-      r = this.getDimensions;
-    return {
-      reference: V(e, await i(n), o),
-      floating: {
-        x: 0,
-        y: 0,
-        ...(await r(n))
-      }
-    };
-  },
-  getClientRects: t => Array.from(t.getClientRects()),
-  isRTL: t => "rtl" === o(t).direction
-};
-function P(t, e, n, o) {
-  void 0 === o && (o = {});
-  const {
-      ancestorScroll: i = !0,
-      ancestorResize: r = !0,
-      elementResize: l = !0,
-      animationFrame: c = !1
-    } = o,
-    s = i && !c,
-    f = s || r ? [...(d(t) ? D(t) : t.contextElement ? D(t.contextElement) : []), ...D(e)] : [];
-  f.forEach(t => {
-    s && t.addEventListener("scroll", n, {
-      passive: !0
-    }), r && t.addEventListener("resize", n);
-  });
-  let u,
-    a = null;
-  if (l) {
-    let o = !0;
-    a = new ResizeObserver(() => {
-      o || n(), o = !1;
-    }), d(t) && !c && a.observe(t), d(t) || !t.contextElement || c || a.observe(t.contextElement), a.observe(e);
-  }
-  let h = c ? E(t) : null;
-  return c && function e() {
-    const o = E(t);
-    !h || o.x === h.x && o.y === h.y && o.width === h.width && o.height === h.height || n();
-    h = o, u = requestAnimationFrame(e);
-  }(), n(), () => {
-    var t;
-    f.forEach(t => {
-      s && t.removeEventListener("scroll", n), r && t.removeEventListener("resize", n);
-    }), null == (t = a) || t.disconnect(), a = null, c && cancelAnimationFrame(u);
-  };
-}
-const z = (t, n, o) => {
-  const i = new Map(),
-    r = {
-      platform: O,
-      ...o
-    },
-    l = {
-      ...r.platform,
-      _c: i
-    };
-  return i$1(t, n, {
-    ...r,
-    platform: l
-  });
-};
-
 const MenuItemRole = {
   /**
    * The menu item has a "menuitem" role
@@ -7710,7 +6775,6 @@ class MenuItem extends FASTElement {
     super(...arguments);
     this.role = MenuItemRole.menuitem;
     this.checked = false;
-    this.focusSubmenuOnLoad = false;
     /**
      * @internal
      */
@@ -7724,19 +6788,16 @@ class MenuItem extends FASTElement {
           this.invoke();
           return false;
         case keyArrowRight:
-          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
-          return false;
-        case keyEscape:
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
+          if (!this.disabled) {
+            this.submenu?.togglePopover(true);
+            this.submenu?.focus();
           }
-          break;
+          return false;
         case keyArrowLeft:
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
+          if (this.parentElement?.hasAttribute("popover")) {
+            this.parentElement.togglePopover(false);
           }
+          return false;
       }
       return true;
     };
@@ -7750,55 +6811,40 @@ class MenuItem extends FASTElement {
       this.invoke();
       return false;
     };
-    /**
-     * @internal
-     */
-    this.submenuLoaded = () => {
-      if (!this.focusSubmenuOnLoad) {
-        return;
-      }
-      this.focusSubmenuOnLoad = false;
-      if (this.submenu) {
-        this.submenu.focus();
-        this.setAttribute("tabindex", "-1");
-      }
-    };
     /**
      * @internal
      */
     this.handleMouseOver = e => {
-      if (this.disabled || !this.hasSubmenu || this.expanded) {
+      if (this.disabled) {
         return false;
       }
-      this.expanded = true;
+      this.submenu?.togglePopover(true);
       return false;
     };
     /**
      * @internal
      */
     this.handleMouseOut = e => {
-      if (!this.expanded || this.contains(document.activeElement)) {
+      if (this.contains(document.activeElement)) {
         return false;
       }
-      this.expanded = false;
+      this.submenu?.togglePopover(false);
       return false;
     };
     /**
+     * Setup required ARIA on open/close
      * @internal
      */
-    this.closeSubMenu = () => {
-      this.expanded = false;
-      this.focus();
-    };
-    /**
-     * @internal
-     */
-    this.expandAndFocus = () => {
-      if (!this.hasSubmenu) {
-        return;
+    this.toggleHandler = e => {
+      if (e instanceof ToggleEvent && e.newState === "open") {
+        this.setAttribute("tabindex", "-1");
+        this.setAttribute("aria-expanded", "true");
+        this.setSubmenuPosition();
+      }
+      if (e instanceof ToggleEvent && e.newState === "closed") {
+        this.setAttribute("aria-expanded", "false");
+        this.setAttribute("tabindex", "0");
       }
-      this.focusSubmenuOnLoad = true;
-      this.expanded = true;
     };
     /**
      * @internal
@@ -7812,8 +6858,9 @@ class MenuItem extends FASTElement {
           this.checked = !this.checked;
           break;
         case MenuItemRole.menuitem:
-          if (this.hasSubmenu) {
-            this.expandAndFocus();
+          if (!!this.submenu) {
+            this.submenu.togglePopover(true);
+            this.submenu.focus();
             break;
           }
           this.$emit("change");
@@ -7825,94 +6872,49 @@ class MenuItem extends FASTElement {
           break;
       }
     };
-  }
-  expandedChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      if (next && this.submenu) {
-        this.updateSubmenu();
+    /**
+     * Set fallback position of menu on open when CSS anchor not supported
+     * @internal
+     */
+    this.setSubmenuPosition = () => {
+      if (!CSS.supports("anchor-name", "--anchor") && !!this.submenu) {
+        const thisRect = this.getBoundingClientRect();
+        const thisSubmenuRect = this.submenu.getBoundingClientRect();
+        const inlineEnd = getComputedStyle(this).direction === "ltr" ? "right" : "left";
+        if (thisRect.width + thisSubmenuRect.width > window.innerWidth * 0.75) {
+          this.submenu.style.translate = "0 -100%";
+          return;
+        }
+        if (thisRect[inlineEnd] + thisSubmenuRect.width > window.innerWidth) {
+          this.submenu.style.translate = "-100% 0";
+          return;
+        }
+        this.submenu.style.translate = `${thisRect.width - 8}px 0`;
       }
-      this.$emit("expanded-change", this, {
-        bubbles: false
-      });
-    }
+    };
   }
   checkedChanged(oldValue, newValue) {
     if (this.$fastController.isConnected) {
       this.$emit("change");
     }
   }
-  /**
-   * @internal
-   */
-  get hasSubmenu() {
-    return !!this.submenu;
-  }
   /**
    * Sets the submenu and updates its position.
    *
    * @internal
    */
   slottedSubmenuChanged(prev, next) {
+    this.submenu?.removeEventListener("toggle", this.toggleHandler);
     if (next.length) {
       this.submenu = next[0];
-      this.updateSubmenu();
+      this.submenu.toggleAttribute("popover", true);
+      this.submenu.addEventListener("toggle", this.toggleHandler);
     }
   }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    this.cleanup?.();
-    super.disconnectedCallback();
-  }
-  /**
-   * Calculate and apply submenu positioning.
-   *
-   * @public
-   */
-  updateSubmenu() {
-    this.cleanup?.();
-    if (!this.submenu || !this.expanded) {
-      return;
-    }
-    Updates.enqueue(() => {
-      this.cleanup = P(this, this.submenuContainer, async () => {
-        const fallbackPlacements = ["left-start", "right-start"];
-        const {
-          x,
-          y
-        } = await z(this, this.submenuContainer, {
-          middleware: [E$1(), k({
-            apply: ({
-              availableWidth,
-              rects
-            }) => {
-              if (availableWidth < rects.floating.width) {
-                fallbackPlacements.push("bottom-end", "top-end");
-              }
-            }
-          }), b$1({
-            fallbackPlacements
-          })],
-          placement: "right-start",
-          strategy: "fixed"
-        });
-        Object.assign(this.submenuContainer.style, {
-          left: `${x}px`,
-          position: "fixed",
-          top: `${y}px`
-        });
-        this.submenuLoaded();
-      });
-    });
-  }
 }
 __decorateClass$c([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$c([attr({
-  mode: "boolean"
-})], MenuItem.prototype, "expanded", 2);
 __decorateClass$c([attr], MenuItem.prototype, "role", 2);
 __decorateClass$c([attr({
   mode: "boolean"
@@ -7927,20 +6929,20 @@ applyMixins(MenuItem, StartEnd);
 const styles$e = css`
   ${display("grid")}
 
-  :host{grid-template-columns:20px 20px auto 20px;align-items:center;grid-gap:4px;height:32px;background:${colorNeutralBackground1};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};padding:0 10px;cursor:pointer;overflow:visible;contain:layout}:host(:hover){background:${colorNeutralBackground1Hover}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}.checkbox,.radio{display:none}.input-container,.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']),:host([checked]) .checkbox,:host([checked]) .radio{display:inline-flex;justify-content:center;align-items:center;color:${colorNeutralForeground2}}.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']){height:32px;font-size:${fontSizeBase500};width:fit-content}.input-container{width:20px}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap;grid-column:4 / span 1;justify-self:flex-end}.expand-collapse-glyph-container{grid-column:4 / span 1;justify-self:flex-end}:host(:hover) .input-container,:host(:hover) .expand-collapse-glyph-container,:host(:hover) .content{color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected}}:host(:active) .input-container,:host(:active) .expand-collapse-glyph-container,:host(:active) .content{color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled}}:host([disabled]) .content,:host([disabled]) .expand-collapse-glyph-container,:host([disabled]) ::slotted([slot='end']),:host([disabled]) ::slotted([slot='start']){color:${colorNeutralForegroundDisabled}}:host([data-indent]){display:grid}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']){display:grid}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1}:host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container{grid-column:5 / span 1}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']) .content,:host([data-indent='1'][role='menuitemradio']) .content{grid-column:auto / span 1}:host([icon]) ::slotted([slot='end']),:host([data-indent='1']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}:host([data-indent='2']){display:grid;grid-template-columns:20px 20px auto auto}:host([data-indent='2']) .content{grid-column:3 / span 1}:host([data-indent='2']) .input-container{grid-column:1 / span 1}:host([data-indent='2']) ::slotted([slot='start']){grid-column:2 / span 1}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}:host([aria-haspopup='menu']) ::slotted([slot='end']){grid-column:3 / span 1;justify-self:flex-end}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}`;
+  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not([checked])) .indicator,:host(:not([checked])) ::slotted([slot='indicator']),:host(:not([aria-haspopup='menu'])) .submenu-glyph,:host(:not([aria-haspopup='menu'])) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){inset-area:inline-end span-block-end;margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-try-options:flip-inline,inset-area(block-start);z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([disabled]),:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:GrayText}`));
 
-const Checkmark16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
-const chevronRight16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
+const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
+const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
 function menuItemTemplate(options = {}) {
-  return html`<template 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="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}">${when(x => x.role === MenuItemRole.menuitemcheckbox, html`<div part="input-container" class="input-container"><span part="checkbox" class="checkbox"><slot name="checkbox-indicator">${staticallyCompose(options.checkboxIndicator)}</slot></span></div>`)} ${when(x => x.role === MenuItemRole.menuitemradio, html`<div part="input-container" class="input-container"><span part="radio" class="radio"><slot name="radio-indicator">${staticallyCompose(options.radioIndicator)}</slot></span></div>`)}</div>${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)} ${when(x => x.hasSubmenu, html`<div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container"><span part="expand-collapse" class="expand-collapse"><slot name="expand-collapse-indicator">${staticallyCompose(options.expandCollapseGlyph)}</slot></span></div>`)}<span ?hidden="${x => !x.expanded}" class="submenu-container" part="submenu-container" ${ref("submenuContainer")}><slot name="submenu" ${slotted({
+  return html`<template aria-haspopup="${x => !!x.submenu ? "menu" : void 0}" aria-checked="${x => x.role !== MenuItemRole.menuitem ? x.checked : void 0}" aria-disabled="${x => x.disabled}" aria-expanded="${x => !!x.submenu ? "false" : void 0}" @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) => x.toggleHandler(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
     property: "slottedSubmenu",
     filter: elements("[role='menu']")
-  })}></slot></span></template>`;
+  })}></slot></template>`;
 }
 const template$e = menuItemTemplate({
-  checkboxIndicator: Checkmark16Filled,
-  expandCollapseGlyph: chevronRight16Filled,
-  radioIndicator: Checkmark16Filled
+  indicator: Checkmark16Filled,
+  submenuGlyph: chevronRight16Filled
 });
 
 const definition$e = MenuItem.compose({
@@ -7962,7 +6964,6 @@ var __decorateClass$b = (decorators, target, key, kind) => {
 const _MenuList = class _MenuList extends FASTElement {
   constructor() {
     super(...arguments);
-    this.expandedItem = null;
     /**
      * The index of the focusable element in the items array
      * defaults to -1
@@ -7980,7 +6981,6 @@ const _MenuList = class _MenuList extends FASTElement {
      */
     this.handleFocusOut = e => {
       if (!this.contains(e.relatedTarget) && this.menuItems !== void 0) {
-        this.collapseExpandedItem();
         const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
         this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
         this.menuItems[focusIndex].setAttribute("tabindex", "0");
@@ -7995,30 +6995,10 @@ const _MenuList = class _MenuList extends FASTElement {
         targetItem.setAttribute("tabindex", "0");
       }
     };
-    this.handleExpandedChanged = e => {
-      if (e.defaultPrevented || e.target === null || this.menuItems === void 0 || this.menuItems.indexOf(e.target) < 0) {
-        return;
-      }
-      e.preventDefault();
-      const changedItem = e.target;
-      if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
-        this.expandedItem = null;
-        return;
-      }
-      if (changedItem.expanded) {
-        if (this.expandedItem !== null && this.expandedItem !== changedItem) {
-          this.expandedItem.expanded = false;
-        }
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.expandedItem = changedItem;
-        this.focusIndex = this.menuItems.indexOf(changedItem);
-        changedItem.setAttribute("tabindex", "0");
-      }
-    };
     /**
-     * handle change from child element
+     * Handle change from child MenuItem element and set radio group behavior
      */
-    this.changeHandler = e => {
+    this.changedMenuItemHandler = e => {
       if (this.menuItems === void 0) {
         return;
       }
@@ -8077,7 +7057,7 @@ const _MenuList = class _MenuList extends FASTElement {
     Updates.enqueue(() => {
       this.setItems();
     });
-    this.addEventListener("change", this.changeHandler);
+    this.addEventListener("change", this.changedMenuItemHandler);
   }
   /**
    * @internal
@@ -8086,7 +7066,7 @@ const _MenuList = class _MenuList extends FASTElement {
     super.disconnectedCallback();
     this.removeItemListeners();
     this.menuItems = void 0;
-    this.removeEventListener("change", this.changeHandler);
+    this.removeEventListener("change", this.changedMenuItemHandler);
   }
   /**
    * Focuses the first item in the menu.
@@ -8096,17 +7076,6 @@ const _MenuList = class _MenuList extends FASTElement {
   focus() {
     this.setFocus(0, 1);
   }
-  /**
-   * Collapses any expanded menu items.
-   *
-   * @public
-   */
-  collapseExpandedItem() {
-    if (this.expandedItem !== null) {
-      this.expandedItem.expanded = false;
-      this.expandedItem = null;
-    }
-  }
   /**
    * @internal
    */
@@ -8134,7 +7103,6 @@ const _MenuList = class _MenuList extends FASTElement {
   removeItemListeners(items = this.items) {
     items.forEach(item => {
       item.removeEventListener("focus", this.handleItemFocus);
-      item.removeEventListener("expanded-changed", this.handleExpandedChanged);
       Observable.getNotifier(item).unsubscribe(this, "hidden");
     });
   }
@@ -8158,20 +7126,22 @@ const _MenuList = class _MenuList extends FASTElement {
     }
     menuItems.forEach((item, index) => {
       item.setAttribute("tabindex", index === 0 ? "0" : "-1");
-      item.addEventListener("expanded-change", this.handleExpandedChanged);
       item.addEventListener("focus", this.handleItemFocus);
     });
     const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
-    filteredMenuListItems?.forEach((item, index) => {
-      const indent = filteredMenuListItems?.reduce((accum, current) => {
-        const elementValue = _MenuList.elementIndent(current);
-        return Math.max(accum, elementValue);
-      }, 0);
+    const indent = filteredMenuListItems?.reduce((accum, current) => {
+      const elementValue = _MenuList.elementIndent(current);
+      return Math.max(accum, elementValue);
+    }, 0);
+    filteredMenuListItems?.forEach(item => {
       if (item instanceof MenuItem) {
         item.setAttribute("data-indent", `${indent}`);
       }
     });
   }
+  /**
+   * Method for Observable changes to the hidden attribute of child elements
+   */
   handleChange(source, propertyName) {
     if (propertyName === "hidden") {
       this.setItems();
@@ -8233,26 +7203,26 @@ class Menu extends FASTElement {
     this.openOnContext = false;
     this.closeOnScroll = false;
     this.persistOnItemClick = false;
-    this.open = false;
     this.slottedMenuList = [];
     this.slottedTriggers = [];
+    /**
+     * Defines whether the menu is open or not.
+     * @internal
+     */
+    this._open = false;
     /**
      * Toggles the open state of the menu.
      * @public
      */
     this.toggleMenu = () => {
-      if (this.open) {
-        this.closeMenu();
-      } else {
-        this.openMenu();
-      }
+      this._menuList?.togglePopover(!this._open);
     };
     /**
      * Closes the menu.
      * @public
      */
     this.closeMenu = () => {
-      this.open = false;
+      this._menuList?.togglePopover(false);
       if (this.closeOnScroll) {
         document.removeEventListener("scroll", this.closeMenu);
       }
@@ -8262,7 +7232,7 @@ class Menu extends FASTElement {
      * @public
      */
     this.openMenu = e => {
-      this.open = true;
+      this._menuList?.togglePopover(true);
       if (e && this.openOnContext) {
         e.preventDefault();
       }
@@ -8271,11 +7241,18 @@ class Menu extends FASTElement {
       }
     };
     /**
-     * The task to set the positioning of the menu.
-     * @internal
+     * Handles the 'toggle' event on the popover.
+     * @public
+     * @param e - the event
+     * @returns void
      */
-    this.setPositioningTask = () => {
-      this.setPositioning();
+    this.toggleHandler = e => {
+      if (e instanceof ToggleEvent) {
+        const newState = e.newState === "open" ? true : false;
+        this._trigger?.setAttribute("aria-expanded", `${newState}`);
+        this._open = newState;
+        this.focusMenuList();
+      }
     };
     /**
      * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
@@ -8284,7 +7261,7 @@ class Menu extends FASTElement {
      * @param e - the keyboard event
      * @public
      */
-    this.handleTriggerKeydown = e => {
+    this.triggerKeydownHandler = e => {
       if (e.defaultPrevented) {
         return;
       }
@@ -8294,21 +7271,18 @@ class Menu extends FASTElement {
         case keyEnter:
           e.preventDefault();
           this.toggleMenu();
-          if (this.open) {
-            this.focusMenuList();
-          }
           break;
         default:
           return true;
       }
     };
     /**
-     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
      * @internal
      * @param e - The event triggered on document click.
      */
-    this.handleDocumentClick = e => {
-      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
+    this.documentClickHandler = e => {
+      if (!e.composedPath().some(el => el === this._trigger || el === this._menuList)) {
         this.closeMenu();
       }
     };
@@ -8329,7 +7303,6 @@ class Menu extends FASTElement {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.cleanup?.();
     this.removeListeners();
   }
   /**
@@ -8342,7 +7315,8 @@ class Menu extends FASTElement {
       this._trigger = this.slottedTriggers[0];
       this._menuList = this.slottedMenuList[0];
       this._trigger.setAttribute("aria-haspopup", "true");
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
+      this._trigger.setAttribute("aria-expanded", `${this._open}`);
+      this._menuList.setAttribute("popover", this.openOnContext ? "manual" : "");
       this.addListeners();
     }
   }
@@ -8351,43 +7325,17 @@ class Menu extends FASTElement {
    * @public
    */
   focusMenuList() {
-    if (this.open && this._menuList) {
-      Updates.enqueue(() => {
-        this._menuList.focus();
-      });
-    }
+    Updates.enqueue(() => {
+      this._menuList.focus();
+    });
   }
   /**
    * Focuses on the menu trigger.
    * @public
    */
   focusTrigger() {
-    if (!this.open && this._trigger) {
-      Updates.enqueue(() => {
-        this._trigger.focus();
-      });
-    }
-  }
-  /**
-   * Called whenever the open state changes.
-   * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
-   * Sets menu list position
-   * emits openChanged event
-   *
-   * @param oldValue - The previous value of 'open'.
-   * @param newValue - The new value of 'open'.
-   * @public
-   */
-  openChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
-      if (this._menuList && this.open) {
-        Updates.enqueue(this.setPositioningTask);
-      }
-    }
-    this.cleanup?.();
-    this.$emit("onOpenChange", {
-      open: newValue
+    Updates.enqueue(() => {
+      this._trigger.focus();
     });
   }
   /**
@@ -8447,54 +7395,17 @@ class Menu extends FASTElement {
       document.removeEventListener("scroll", this.closeMenu);
     }
   }
-  /**
-   * Sets the positioning of the menu.
-   * @internal
-   */
-  setPositioning() {
-    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
-      this.cleanup = P(this, this.positioningContainer, async () => {
-        const {
-          middlewareData,
-          x,
-          y
-        } = await z(this._trigger, this.positioningContainer, {
-          placement: "bottom",
-          strategy: "fixed",
-          middleware: [b$1(), k({
-            apply: ({
-              availableHeight,
-              rects
-            }) => {
-              this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
-                maxHeight: `${availableHeight}px`,
-                width: `${rects.reference.width}px`
-              });
-            }
-          }), P$1()]
-        });
-        if (middlewareData.hide?.referenceHidden) {
-          this.open = false;
-          return;
-        }
-        this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
-          position: "fixed",
-          top: "0",
-          left: "0",
-          transform: `translate(${x}px, ${y}px)`
-        });
-      });
-    }
-  }
   /**
    * Adds event listeners.
-   * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+   * Adds click and keydown event listeners to the trigger.
+   * Adds a 'toggle' event listener to the menu list.
    * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-   * @public
+   * If 'openOnContext' is true, adds a 'contextmenu' event listener to the trigger and a document 'click' event listener.
+   * @internal
    */
   addListeners() {
-    document.addEventListener("click", this.handleDocumentClick);
-    this._trigger?.addEventListener("keydown", this.handleTriggerKeydown);
+    this._menuList?.addEventListener("toggle", this.toggleHandler);
+    this._trigger?.addEventListener("keydown", this.triggerKeydownHandler);
     if (!this.persistOnItemClick) {
       this._menuList?.addEventListener("click", this.closeMenu);
     }
@@ -8502,19 +7413,22 @@ class Menu extends FASTElement {
       this._trigger?.addEventListener("mouseover", this.openMenu);
     } else if (this.openOnContext) {
       this._trigger?.addEventListener("contextmenu", this.openMenu);
+      document.addEventListener("click", this.documentClickHandler);
     } else {
       this._trigger?.addEventListener("click", this.toggleMenu);
     }
   }
   /**
    * Removes event listeners.
-   * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+   * Removes click and keydown event listeners from the trigger.
+   * Also removes toggle event listener from the menu list.
    * Also removes 'mouseover' event listeners from the trigger.
+   * Also removes 'contextmenu' event listeners from the trigger and document 'click' event listeners.
    * @internal
    */
   removeListeners() {
-    document.removeEventListener("click", this.handleDocumentClick);
-    this._trigger?.removeEventListener("keydown", this.handleTriggerKeydown);
+    this._menuList?.removeEventListener("toggle", this.toggleHandler);
+    this._trigger?.removeEventListener("keydown", this.triggerKeydownHandler);
     if (!this.persistOnItemClick) {
       this._menuList?.removeEventListener("click", this.closeMenu);
     }
@@ -8523,6 +7437,7 @@ class Menu extends FASTElement {
     }
     if (this.openOnContext) {
       this._trigger?.removeEventListener("contextmenu", this.openMenu);
+      document.removeEventListener("click", this.documentClickHandler);
     } else {
       this._trigger?.removeEventListener("click", this.toggleMenu);
     }
@@ -8534,7 +7449,7 @@ class Menu extends FASTElement {
    * @param e - the keyboard event
    * @public
    */
-  handleMenuKeydown(e) {
+  menuKeydownHandler(e) {
     if (e.defaultPrevented) {
       return;
     }
@@ -8542,18 +7457,14 @@ class Menu extends FASTElement {
     switch (key) {
       case keyEscape:
         e.preventDefault();
-        if (this.open) {
+        if (this._open) {
           this.closeMenu();
           this.focusTrigger();
         }
         break;
       case keyTab:
-        if (this.open) {
-          this.closeMenu();
-        }
-        if (e.shiftKey) {
-          this.focusTrigger();
-        }
+        if (this._open) this.closeMenu();
+        if (e.shiftKey) this.focusTrigger();
       default:
         return true;
     }
@@ -8575,23 +7486,22 @@ __decorateClass$a([observable, attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$a([observable, attr({
-  mode: "boolean"
-})], Menu.prototype, "open", 2);
 __decorateClass$a([observable], Menu.prototype, "slottedMenuList", 2);
 __decorateClass$a([observable], Menu.prototype, "slottedTriggers", 2);
 
 const styles$c = css`
-  :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
+  ${display("inline-block")}
+
+  ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){inset-area:block-end span-inline-end;margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-try-options:flip-block;position:absolute;z-index:1}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}`;
 
 function menuTemplate() {
-  return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.handleMenuKeydown(c.event)}"><slot name="trigger" ${slotted({
+  return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.menuKeydownHandler(c.event)}"><slot name="trigger" ${slotted({
     property: "slottedTriggers",
     filter: elements()
-  })}></slot><span ${ref("positioningContainer")} part="positioning-container" class="positioning-container" ?hidden="${x => !x.open}"><slot ${slotted({
+  })}></slot><slot ${slotted({
     property: "slottedMenuList",
     filter: elements()
-  })}></slot></span></template>`;
+  })}></slot></template>`;
 }
 const template$c = menuTemplate();