lientHeight, c = 0, m = 0;
  if (i) {
    r = i.width, n = i.height;
    const g = vr();
    (!g || g && e === "fixed") && (c = i.offsetLeft, m = i.offsetTop);
  }
  return {
    width: r,
    height: n,
    x: c,
    y: m
  };
}
function _h(a, e) {
  const t = uo(a, !0, e === "fixed"), o = t.top + a.clientTop, i = t.left + a.clientLeft, r = et(a) ? Bo(a) : Je(1), n = a.clientWidth * r.x, c = a.clientHeight * r.y, m = i * r.x, g = o * r.y;
  return {
    width: n,
    height: c,
    x: m,
    y: g
  };
}
function tn(a, e, t) {
  let o;
  if (e === "viewport")
    o = wh(a, t);
  else if (e === "document")
    o = $h(rt(a));
  else if (Ge(e))
    o = _h(e, t);
  else {
    const i = ls(a);
    o = {
      x: e.x - i.x,
      y: e.y - i.y,
      width: e.width,
      height: e.height
    };
  }
  return oa(o);
}
function ds(a, e) {
  const t = Nt(a);
  return t === e || !Ge(t) || Fo(t) ? !1 : Ye(t).position === "fixed" || ds(t, e);
}
function kh(a, e) {
  const t = e.get(a);
  if (t)
    return t;
  let o = hi(a, [], !1).filter((c) => Ge(c) && Yo(c) !== "body"), i = null;
  const r = Ye(a).position === "fixed";
  let n = r ? Nt(a) : a;
  for (; Ge(n) && !Fo(n); ) {
    const c = Ye(n), m = br(n);
    !m && c.position === "fixed" && (i = null), (r ? !m && !i : !m && c.position === "static" && !!i && ["absolute", "fixed"].includes(i.position) || Oi(n) && !m && ds(a, n)) ? o = o.filter((f) => f !== n) : i = c, n = Nt(n);
  }
  return e.set(a, o), o;
}
function Sh(a) {
  let {
    element: e,
    boundary: t,
    rootBoundary: o,
    strategy: i
  } = a;
  const n = [...t === "clippingAncestors" ? ba(e) ? [] : kh(e, this._c) : [].concat(t), o], c = n[0], m = n.reduce((g, f) => {
    const v = tn(e, f, i);
    return g.top = no(v.top, g.top), g.right = zo(v.right, g.right), g.bottom = zo(v.bottom, g.bottom), g.left = no(v.left, g.left), g;
  }, tn(e, c, i));
  return {
    width: m.right - m.left,
    height: m.bottom - m.top,
    x: m.left,
    y: m.top
  };
}
function Oh(a) {
  const {
    width: e,
    height: t
  } = ss(a);
  return {
    width: e,
    height: t
  };
}
function Mh(a, e, t) {
  const o = et(e), i = rt(e), r = t === "fixed", n = uo(a, !0, r, e);
  let c = {
    scrollLeft: 0,
    scrollTop: 0
  };
  const m = Je(0);
  if (o || !o && !r)
    if ((Yo(e) !== "body" || Oi(i)) && (c = va(e)), o) {
      const x = uo(e, !0, r, e);
      m.x = x.x + e.clientLeft, m.y = x.y + e.clientTop;
    } else
      i && (m.x = yr(i));
  const g = i && !o && !r ? cs(i, c) : Je(0), f = n.left + c.scrollLeft - m.x - g.x, v = n.top + c.scrollTop - m.y - g.y;
  return {
    x: f,
    y: v,
    width: n.width,
    height: n.height
  };
}
function Da(a) {
  return Ye(a).position === "static";
}
function on(a, e) {
  if (!et(a) || Ye(a).position === "fixed")
    return null;
  if (e)
    return e(a);
  let t = a.offsetParent;
  return rt(a) === t && (t = t.ownerDocument.body), t;
}
function us(a, e) {
  const t = Be(a);
  if (ba(a))
    return t;
  if (!et(a)) {
    let i = Nt(a);
    for (; i && !Fo(i); ) {
      if (Ge(i) && !Da(i))
        return i;
      i = Nt(i);
    }
    return t;
  }
  let o = on(a, e);
  for (; o && gh(o) && Da(o); )
    o = on(o, e);
  return o && Fo(o) && Da(o) && !br(o) ? t : o || bh(a) || t;
}
const Lh = async function(a) {
  const e = this.getOffsetParent || us, t = this.getDimensions, o = await t(a.floating);
  return {
    reference: Mh(a.reference, await e(a.floating), a.strategy),
    floating: {
      x: 0,
      y: 0,
      width: o.width,
      height: o.height
    }
  };
};
function Bh(a) {
  return Ye(a).direction === "rtl";
}
const qa = {
  convertOffsetParentRelativeRectToViewportRelativeRect: yh,
  getDocumentElement: rt,
  getClippingRect: Sh,
  getOffsetParent: us,
  getElementRects: Lh,
  getClientRects: xh,
  getDimensions: Oh,
  getScale: Bo,
  isElement: Ge,
  isRTL: Bh
};
function Ch(a, e) {
  let t = null, o;
  const i = rt(a);
  function r() {
    var c;
    clearTimeout(o), (c = t) == null || c.disconnect(), t = null;
  }
  function n(c, m) {
    c === void 0 && (c = !1), m === void 0 && (m = 1), r();
    const {
      left: g,
      top: f,
      width: v,
      height: x
    } = a.getBoundingClientRect();
    if (c || e(), !v || !x)
      return;
    const _ = Ti(f), $ = Ti(i.clientWidth - (g + v)), L = Ti(i.clientHeight - (f + x)), N = Ti(g), G = {
      rootMargin: -_ + "px " + -$ + "px " + -L + "px " + -N + "px",
      threshold: no(0, zo(1, m)) || 1
    };
    let T = !0;
    function se(W) {
      const Ke = W[0].intersectionRatio;
      if (Ke !== m) {
        if (!T)
          return n();
        Ke ? n(!1, Ke) : o = setTimeout(() => {
          n(!1, 1e-7);
        }, 1e3);
      }
      T = !1;
    }
    try {
      t = new IntersectionObserver(se, {
        ...G,
        // Handle <iframe>s
        root: i.ownerDocument
      });
    } catch {
      t = new IntersectionObserver(se, G);
    }
    t.observe(a);
  }
  return n(!0), r;
}
function zh(a, e, t, o) {
  o === void 0 && (o = {});
  const {
    ancestorScroll: i = !0,
    ancestorResize: r = !0,
    elementResize: n = typeof ResizeObserver == "function",
    layoutShift: c = typeof IntersectionObserver == "function",
    animationFrame: m = !1
  } = o, g = fr(a), f = i || r ? [...g ? hi(g) : [], ...hi(e)] : [];
  f.forEach((R) => {
    i && R.addEventListener("scroll", t, {
      passive: !0
    }), r && R.addEventListener("resize", t);
  });
  const v = g && c ? Ch(g, t) : null;
  let x = -1, _ = null;
  n && (_ = new ResizeObserver((R) => {
    let [G] = R;
    G && G.target === g && _ && (_.unobserve(e), cancelAnimationFrame(x), x = requestAnimationFrame(() => {
      var T;
      (T = _) == null || T.observe(e);
    })), t();
  }), g && !m && _.observe(g), _.observe(e));
  let $, L = m ? uo(a) : null;
  m && N();
  function N() {
    const R = uo(a);
    L && (R.x !== L.x || R.y !== L.y || R.width !== L.width || R.height !== L.height) && t(), L = R, $ = requestAnimationFrame(N);
  }
  return t(), () => {
    var R;
    f.forEach((G) => {
      i && G.removeEventListener("scroll", t), r && G.removeEventListener("resize", t);
    }), v?.(), (R = _) == null || R.disconnect(), _ = null, m && cancelAnimationFrame($);
  };
}
const Ah = hh, Fh = ph, Nh = dh, Ih = uh, Uh = ch, Rh = (a, e, t) => {
  const o = /* @__PURE__ */ new Map(), i = {
    platform: qa,
    ...t
  }, r = {
    ...i.platform,
    _c: o
  };
  return lh(a, e, {
    ...i,
    platform: r
  });
};
function ms(a) {
  return Dh(a);
}
function Ea(a) {
  return a.assignedSlot ? a.assignedSlot : a.parentNode instanceof ShadowRoot ? a.parentNode.host : a.parentNode;
}
function Dh(a) {
  for (let e = a; e; e = Ea(e))
    if (e instanceof Element && getComputedStyle(e).display === "none")
      return null;
  for (let e = Ea(a); e; e = Ea(e)) {
    if (!(e instanceof Element))
      continue;
    const t = getComputedStyle(e);
    if (t.display !== "contents" && (t.position !== "static" || t.filter !== "none" || e.tagName === "BODY"))
      return e;
  }
  return null;
}
const hs = (a) => {
  const e = h(a);
  return s`
    .${e}.tooltip {
      --maui-tooltip-shadow-hover-color: var(--maui-effect-shadow-hover-color);
      --maui-tooltip-trigger-icon-color: var(
        --maui-color-interaction-interaction
      );
      ${d({ size: "copy-medium", tenant: a })};
    }
  `;
}, Eh = s`
  ${hs("lh")}
`, Ph = s`
  ${C}

  ${A}

  .tooltip {
    --maui-tooltip-box-color: var(--maui-color-text-caption);
    --maui-tooltip-info-box-color: var(--maui-color-text-copy);
    --maui-tooltip-box-shadow: 0 0 4px var(--maui-tooltip-shadow-hover-color);
    --maui-tooltip-trigger-icon-color: var(--maui-color-text-copy);
    --maui-tooltip-font-weight: var(--maui-font-weight-regular);
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: auto;
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-tooltip-font-weight);
    ${d({ size: "copy-medium", tenant: "wl" })};
  }

  .tooltip.full-width {
    width: 100%;
  }

  .tooltip.full-height {
    height: 100%;
  }

  .tooltip.fixed .popup {
    position: fixed;
  }

  slot::slotted(maui-icon[slot='trigger']) {
    cursor: pointer;
    --maui-icon-color: var(--maui-tooltip-trigger-icon-color);
    width: 24px;
  }

  .popup {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--maui-color-brand-light);
    z-index: 2;
  }

  .box-wrapper {
    position: relative;
    background-color: white;
    z-index: 2;
    filter: drop-shadow(var(--maui-tooltip-box-shadow));
  }

  .small {
    color: var(--maui-tooltip-box-color);
  }

  .info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    color: var(--maui-tooltip-info-box-color);
  }
  .content {
    padding: 10px;
  }

  .small .content {
    padding: 6px 8px;
  }

  .arrow {
    pointer-events: none;
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    z-index: 2;
  }

  /** attachment variants, i.e. arrow attached to bottom side = placement top-* */
  .arrow.bottom {
    border-top-color: var(--maui-color-brand-light);
  }
  .arrow.top {
    border-bottom-color: var(--maui-color-brand-light);
  }
  .arrow.left {
    border-right-color: var(--maui-color-brand-light);
  }
  .arrow.right {
    border-left-color: var(--maui-color-brand-light);
  }

  /** triangle box-shadow for arrow */
  .arrow::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    z-index: 0;
  }
  .arrow.bottom::before {
    bottom: 2px;
    left: -6px;
  }
  .arrow.top::before {
    top: 2px;
    left: -6px;
  }
  .arrow.left::before {
    bottom: -6px;
    left: 2px;
  }
  .arrow.right::before {
    top: -6px;
    right: 2px;
  }
`, Hh = s`
  .os {
    --maui-tooltip-box-color: var(--maui-color-text-copy);
    --maui-tooltip-shadow-hover-color: var(--maui-color-grey-04);
    --maui-tooltip-trigger-icon-color: var(
      --maui-color-interaction-interaction
    );
  }

  .os.tooltip {
    ${d({ size: "copy-medium", tenant: "os" })};
  }
`, Gh = s`
  .lx {
    --maui-tooltip-shadow-hover-color: var(--maui-color-grey-02);
    --maui-tooltip-trigger-icon-color: var(
      --maui-color-interaction-interaction
    );
  }
  .lx.tooltip {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, Yh = s`
  .sn {
    --maui-tooltip-shadow-hover-color: var(--maui-color-grey-04);
    --maui-tooltip-trigger-icon-color: var(
      --maui-color-interaction-buttonsecondary
    );
  }
  .sn.tooltip {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, Th = s`
  ${hs("b2b")}
`, Xh = s`
  .four_y {
    --maui-tooltip-box-color: var(--maui-color-text-caption);
    --maui-tooltip-shadow-hover-color: var(--maui-color-grey-04);
    --maui-tooltip-trigger-icon-color: var(
      --maui-color-interaction-interaction
    );
  }

  .four_y.tooltip {
    --maui-tooltip-box-shadow: var(--maui-effect-elevation-1);
    ${p({ size: "forms-medium", tenant: "four_y" })};
  }

  .four_y .box-wrapper {
    overflow: hidden;
    border-radius: var(--maui-radii-default-radius);
  }

  .four_y .info-box {
    padding: var(--maui-spacing-2);
    gap: var(--maui-spacing-2);
  }

  .four_y .box-wrapper:not(.small) .content {
    padding: var(--maui-spacing-3);
  }
`, Vh = s`
  .mmg {
    --maui-tooltip-box-color: var(--maui-color-text-caption);
    --maui-tooltip-shadow-hover-color: var(--maui-color-grey-04);
    --maui-tooltip-trigger-icon-color: var(
      --maui-color-interaction-interaction
    );
  }

  .mmg.tooltip {
    --maui-tooltip-box-shadow: var(--maui-effect-elevation-1);
    ${d({ size: "copy-medium", tenant: "mmg" })};
  }

  .mmg .box-wrapper {
    overflow: hidden;
    border-radius: var(--maui-radii-default-radius);
    color: var(--maui-color-text-copy);
  }

  .mmg .box-wrapper,
  .mmg .arrow::before {
    background-color: var(--maui-color-grey-02);
  }

  .mmg .info-box {
    padding: var(--maui-spacing-2);
    gap: var(--maui-spacing-2);
  }

  .mmg .box-wrapper.small .content {
    padding: var(--maui-spacing-2);
  }
`, jh = [
  Ph,
  Eh,
  Hh,
  Gh,
  Yh,
  Th,
  Xh,
  Vh
];
var qh = Object.defineProperty, Kh = Object.getOwnPropertyDescriptor, _e = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Kh(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && qh(e, t, i), i;
};
class me extends wt {
  constructor() {
    super(), this.isFocused = !1, this.isHovered = !1, this.isBoxOpen = !1, this.placement = "top", this.strategy = "absolute", this.width = "auto", this.height = "auto", this.type = "small", this.assistiveClose = "Close", this.componentName = "tooltip";
  }
  async connectedCallback() {
    super.connectedCallback(), this.handleOutsideClick = this.handleOutsideClick.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), await this.updateComplete, this.start();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.stop(), this.removeOpenListeners();
  }
  async updated(e) {
    super.updated(e), e.has("isBoxOpen") && (this.isBoxOpen ? this.start() : this.stop()), this.isBoxOpen && (await this.updateComplete, this.setPosition());
  }
  start() {
    this.triggerElement && (this.cleanup = zh(this.triggerElement, this.popupElement, () => {
      this.setPosition();
    }));
  }
  async stop() {
    return new Promise((e) => {
      this.cleanup ? (this.cleanup(), this.cleanup = void 0, requestAnimationFrame(() => e())) : e();
    });
  }
  handleOutsideClick(e) {
    const t = e.composedPath();
    this && !t.includes(this) && this.handleBlur();
  }
  addOpenListeners() {
    document.addEventListener("focusin", this.handleOutsideClick), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("mousedown", this.handleOutsideClick);
  }
  removeOpenListeners() {
    document.removeEventListener("focusin", this.handleOutsideClick), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("mousedown", this.handleOutsideClick);
  }
  handleBoxOpen() {
    this.isBoxOpen || (this.isBoxOpen = !0, this.setPosition(), this.emit("maui-show"));
  }
  handleBoxClose() {
    !this.isBoxOpen || this.type === "small" && (this.isHovered || this.isFocused) || (this.isBoxOpen = !1, this.emit("maui-hide"));
  }
  handleFocusIn() {
    this.isFocused = !0, this.type === "small" && this.handleBoxOpen();
  }
  handleFocusOut() {
    this.isFocused = !1, this.type === "small" && this.handleBoxClose();
  }
  handleMouseEnter() {
    this.isHovered = !0, this.type === "small" && this.handleBoxOpen();
  }
  handleMouseLeave() {
    this.isHovered = !1, this.type === "small" && this.handleBoxClose();
  }
  handleClick() {
    this.type === "info-box" && (this.isBoxOpen ? this.handleBoxClose() : this.handleBoxOpen(), this.emit("maui-click"));
  }
  handleKeyDown(e) {
    this.type === "info-box" && (["Enter", " "].includes(e.key) ? (e.preventDefault(), e.stopPropagation(), this.isBoxOpen ? this.handleBoxClose() : this.handleBoxOpen(), this.emit("maui-key-down", {
      detail: e
    })) : e.key === "Escape" && (this.handleBoxClose(), this.emit("maui-key-down", {
      detail: e
    })));
  }
  handleCloseClick(e) {
    e.preventDefault(), this.handleBoxClose();
  }
  handleCloseKeyDown(e) {
    ["Enter", " "].includes(e.key) && (e.preventDefault(), this.handleBoxClose());
  }
  handleOpenChange() {
    this.isBoxOpen ? this.handleBoxOpen() : this.handleBoxClose();
  }
  setPosition() {
    !this.triggerElement || !this.popupElement || Rh(this.triggerElement, this.popupElement, {
      placement: this.placement,
      middleware: [
        Ah(10),
        Nh(),
        Fh({ padding: 5 }),
        ...this.arrowElement ? [Uh({ element: this.arrowElement })] : [],
        Ih()
      ],
      strategy: this.strategy,
      platform: {
        ...qa,
        getOffsetParent: (e) => qa.getOffsetParent(e, ms)
      }
    }).then(({ x: e, y: t, placement: o, middlewareData: i }) => {
      if (Object.assign(this.popupElement.style, {
        left: `${e}px`,
        top: `${t}px`
      }), this.arrowElement) {
        const { x: r, y: n } = i.arrow, c = {
          top: "bottom",
          right: "left",
          bottom: "top",
          left: "right"
        }[o.split("-")[0]];
        Object.assign(this.arrowElement.style, {
          left: r != null ? `${r}px` : "",
          top: n != null ? `${n}px` : "",
          right: "",
          bottom: "",
          [c]: "-12px"
        }), this.arrowElement.classList.remove("top", "right", "bottom", "left"), this.arrowElement.classList.add(c), Object.assign(this.popupElement.style, {
          visibility: i.hide?.referenceHidden ? "hidden" : "visible"
        });
      }
    });
  }
  async handleTriggerChange() {
    if (await this.stop(), this.triggerElement = this.triggerSlot.assignedElements({
      flatten: !0
    })[0], !this.triggerElement)
      throw new Error(
        "Invalid trigger element: no element could be found in the trigger slot."
      );
    this.start();
  }
  handleBoxChange() {
    this.setPosition();
  }
  render() {
    const e = this.showArrow ? "show-arrow" : "no-arrow", t = this.showArrow ? u`<div class="arrow"></div>` : null;
    return u` <div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [e]: !0,
      [this.strategy]: !!this.strategy,
      [`${this.width}-width`]: !0,
      [`${this.height}-height`]: !0
    })}
    >
      <slot
        name="trigger"
        @slotchange=${this.handleTriggerChange}
        @focusin=${this.handleFocusIn}
        @focusout=${this.handleFocusOut}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
        @click=${this.handleClick}
        @keydown=${this.handleKeyDown}
      ></slot>
      <div
        class=${y({
      popup: !0,
      "sr-only": !this.isBoxOpen
    })}
      >
        <div class="box-wrapper ${this.type}">
          <div
            class="content"
            aria-live="polite"
            aria-atomic="true"
            aria-relevant="additions"
            .ariaLabel=${this.ariaLabel || "tooltip"}
            .role=${this.type === "info-box" ? "dialog" : "tooltip"}
          >
            <slot
              aria-hidden=${this.isBoxOpen ? "false" : "true"}
              name="box"
              @slotchange=${this.handleBoxChange}
            ></slot>
          </div>
          ${this.type === "info-box" && this.isBoxOpen ? u`<maui-icon-link
                .theme=${this.theme}
                variant="close"
                size="small"
                aria-label=${this.assistiveClose}
                @click=${this.handleCloseClick}
                @keydown=${this.handleCloseKeyDown}
              ></maui-icon-link>` : ""}
        </div>
        ${t}
      </div>
    </div>`;
  }
}
me.styles = jh;
_e([
  O()
], me.prototype, "isFocused", 2);
_e([
  O()
], me.prototype, "isHovered", 2);
_e([
  M("slot[name=trigger]")
], me.prototype, "triggerSlot", 2);
_e([
  M(".popup")
], me.prototype, "popupElement", 2);
_e([
  M(".arrow")
], me.prototype, "arrowElement", 2);
_e([
  l({ reflect: !0, attribute: "is-box-open", type: Boolean })
], me.prototype, "isBoxOpen", 2);
_e([
  l({ attribute: "show-arrow", type: Boolean })
], me.prototype, "showArrow", 2);
_e([
  l({ type: String })
], me.prototype, "placement", 2);
_e([
  l({ type: String })
], me.prototype, "strategy", 2);
_e([
  l({ type: String, reflect: !0 })
], me.prototype, "width", 2);
_e([
  l({ type: String, reflect: !0 })
], me.prototype, "height", 2);
_e([
  l({ type: String })
], me.prototype, "type", 2);
_e([
  l({ attribute: "assistive-close", type: String })
], me.prototype, "assistiveClose", 2);
_e([
  F("isOpen", { waitUntilFirstUpdate: !0 })
], me.prototype, "handleOpenChange", 1);
w("maui-tooltip", me);
const Wh = s`
  ${C}

  :host {
    display: inline-block;
  }

  .avatar {
    position: relative;
    display: inline-block;
  }

  .content {
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-bold);
    position: relative;
    width: var(--_avatar-size);
    aspect-ratio: 1;
    border-radius: 9999vw;
    display: grid;
    place-content: center;
    background-color: var(--maui-color-grey-03);
    color: var(--maui-color-interaction-buttonsecondary);
    z-index: 1;
    --maui-icon-color-override: currentColor;
    box-sizing: border-box;
  }

  .small {
    --_avatar-size: 24px;
  }

  .medium {
    --_avatar-size: 40px;
  }

  .large {
    --_avatar-size: 60px;
  }

  .extra-large {
    --_avatar-size: 75px;
  }

  .initials {
    position: relative;
    top: 1px;
  }

  .indicator {
    display: grid;
    position: absolute;

    top: calc(-1 * var(--_indicator-offset-y));
    left: calc(100% - var(--_indicator-offset-x));

    z-index: 2;
    line-height: 0;
  }

  .small .indicator {
    --_indicator-offset-x: 7px;
    --_indicator-offset-y: 1px;
  }
  .medium .indicator {
    --_indicator-offset-x: 15px;
    --_indicator-offset-y: 7px;
  }

  .medium .indicator:not(.default) {
    --_indicator-offset-x: 16px;
    --_indicator-offset-y: 8px;
  }

  .medium .indicator.no-content {
    --_indicator-offset-x: 12px;
    --_indicator-offset-y: 4px;
  }
  .large .indicator {
    --_indicator-offset-x: 22px;
    --_indicator-offset-y: 6px;
  }
  .large .indicator.no-content {
    --_indicator-offset-x: 18px;
    --_indicator-offset-y: 2px;
  }
  .extra-large .indicator {
    --_indicator-offset-x: 26px;
    --_indicator-offset-y: 4px;
  }
  .extra-large .indicator.no-content {
    --_indicator-offset-x: 22px;
    --_indicator-offset-y: 0px;
  }

  .indicator.hidden {
    z-index: 0;
    opacity: 0;
  }

  .selectable.selected.disabled .content {
    background-color: var(--maui-color-disabled-background);
    color: var(--maui-color-disabled-foreground);
  }

  .selectable .content {
    border-style: solid;
  }

  .small.selectable .content {
    border-width: 1px;
  }

  .medium.selectable .content {
    border-width: 2px;
  }

  .large.selectable .content,
  .extra-large.selectable .content {
    border-width: 3px;
  }

  .selectable:not(.disabled) .content {
    border-color: var(--maui-color-grey-06);
    background: transparent;
  }

  .selectable:not(.selected) .content {
    font-weight: var(--maui-font-weight-regular);
  }

  .selectable:not(.selected):not(.disabled) .content {
    color: var(--maui-color-text-copy);
  }

  .selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground);
    border-color: var(--maui-color-disabled-background);
    background: transparent;
  }

  .selectable.selected.disabled .content {
    border-color: transparent;
  }

  .selectable.selected:not(.disabled) .content {
    background: var(--maui-color-brand-primary);
    border-color: var(--maui-color-brand-primary);
    color: var(--maui-color-brand-light);
  }

  .inverted .content {
    background-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-text-copy);
  }

  .inverted.selectable:not(.selected, .disabled) .content {
    border-color: var(--maui-color-grey-06);
    color: var(--maui-color-interaction-selection-inverted);
  }

  .inverted.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-selection-inverted);
    border-color: var(--maui-color-interaction-selection-inverted);
    color: var(--maui-color-text-copy);
  }

  .inverted.selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: var(--maui-color-disabled-background-inverted);
    background: transparent;
  }

  .inverted.selectable.selected.disabled .content {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: transparent;
    background: var(--maui-color-disabled-background-inverted);
  }

  .disabled {
    cursor: not-allowed;
  }

  .disabled .indicator ::slotted(maui-indicator) {
    display: none;
  }

  .image {
    display: block;
    width: calc(100% - 2 * var(--_image-inset, 0));
    height: calc(100% - 2 * var(--_image-inset, 0));
    border-radius: 9999vw;
    position: absolute;

    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .inverted .image {
    --_image-inset: 2px;
    inset: var(--_image-inset);
  }

  .inverted.small .image,
  .inverted.medium .image {
    --_image-inset: 1px;
  }

  .image.loaded:not([hidden]) {
    opacity: 1;
  }
`, Zh = s`
  .lh.small {
    ${d({ size: "copy-extra-small", tenant: "lh" })};
  }

  .lh.medium {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }

  .lh.large,
  .lh.extra-large {
    ${d({ size: "copy-large", tenant: "lh" })};
  }
`, Qh = s`
  .os.small {
    --_avatar-size: 26px;

    ${d({ size: "copy-extra-small", tenant: "os" })};
  }

  .os.medium {
    ${d({ size: "copy-small", tenant: "os" })};
  }

  .os.large,
  .os.extra-large {
    ${d({ size: "copy-medium", tenant: "os" })};
  }

  .os.medium.selectable .content,
  .os.large.selectable .content,
  .os.extra-large.selectable .content {
    border-width: 2px;
  }

  .os.inverted.medium .image {
    --_image-inset: 2px;
  }

  .os .content {
    background-color: var(--maui-color-grey-06);
    color: var(--maui-color-brand-light);
  }

  .os.inverted:not(.selectable) .content {
    background-color: var(--maui-color-brand-light);
    color: var(--maui-color-grey-06);
  }

  .os.selectable:not(.selected):not(.disabled) .content {
    color: var(--maui-color-interaction-interaction);
    border-color: var(--maui-color-interaction-interaction);
  }

  .os.inverted.selectable:not(.selected, .disabled) .content {
    border-color: var(--maui-color-interaction-selection-inverted);
    color: var(--maui-color-interaction-selection-inverted);
  }

  .os.inverted.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-selection-inverted);
    border-color: var(--maui-color-interaction-selection-inverted);
    color: var(--maui-color-text-copy);
  }

  .os.selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground);
    border-color: var(--maui-color-disabled-foreground);
    background: transparent;
  }

  .os.inverted.selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: var(--maui-color-disabled-background-inverted);
    background: transparent;
  }
`, Jh = s`
  .lx.small {
    ${d({ size: "copy-extra-small", tenant: "lx" })};
  }

  .lx.medium {
    ${d({ size: "copy-small", tenant: "lx" })};
  }

  .lx.large {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .lx.extra-large {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .lx .content {
    background-color: var(--maui-color-grey-02);
    color: var(--maui-color-text-copy);
  }

  .lx.selectable:not(.disabled):not(.selected) .content {
    border-color: var(--maui-color-grey-03);
    color: var(--maui-color-interaction-interaction);
  }

  .lx.inverted:not(.selectable) .content {
    background-color: var(--maui-color-grey-02);
  }

  .lx.inverted.medium .image {
    --_image-inset: 2px;
  }

  .lx.inverted.large .image,
  .lx.inverted.extra-large .image {
    --_image-inset: 3px;
  }
`, ep = s`
  .sn.small {
    --_avatar-size: 30px;

    ${d({ size: "copy-extra-small", tenant: "sn" })};
  }

  .sn.medium {
    ${d({ size: "copy-small", tenant: "sn" })};
  }

  .sn.large,
  .sn.extra-large {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }

  .sn.selectable:not(.selected):not(.disabled) .content {
    color: var(--maui-color-interaction-selection);
    border-color: var(--maui-color-interaction-selection);
  }

  .sn.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-selection);
    border-color: var(--maui-color-interaction-selection);
  }

  .sn.medium.selectable .content {
    border-width: 1px;
  }
  .sn.large.selectable .content,
  .sn.extra-large.selectable .content {
    border-width: 2px;
  }

  .sn.inverted:not(.selectable) .content {
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.inverted.selectable:not(.selected, .disabled) .content {
    border-color: var(--maui-color-grey-06);
    color: var(--maui-color-interaction-interaction-inverted);
  }

  .sn.inverted.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-selection-inverted);
    border-color: var(--maui-color-interaction-selection-inverted);
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground);
    border-color: var(--maui-color-disabled-foreground);
    background: transparent;
  }

  .sn.inverted.selectable:not(.selected).disabled .content {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: var(--maui-color-disabled-foreground-inverted);
    background: transparent;
  }
`, tp = s`
  .b2b.small {
    ${d({ size: "copy-extra-small", tenant: "b2b" })};
  }

  .b2b.medium {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }

  .b2b.large,
  .b2b.extra-large {
    ${d({ size: "copy-large", tenant: "b2b" })};
  }

  .b2b.medium.selectable .content {
    border-width: 1px;
  }
  .b2b.large.selectable .content,
  .b2b.extra-large.selectable .content {
    border-width: 2px;
  }
`, op = s`
  .four_y.small {
    ${d({ size: "copy-extra-small", tenant: "four_y" })};
  }

  .four_y.medium {
    ${d({ size: "copy-small", tenant: "four_y" })};
  }

  .four_y.large,
  .four_y.extra-large {
    ${d({ size: "copy-large", tenant: "four_y" })};
  }

  .four_y:not(.selectable, .selected, .disabled) .content {
    color: var(--maui-color-text-copy);
  }

  .four_y:not(.selectable, .selected, .disabled).inverted .content {
    color: var(--maui-color-text-headline);
  }

  .four_y.selectable:not(.selected, .disabled) .content {
    border-color: var(--maui-color-grey-05);
  }

  .four_y.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-buttonprimary);
    border-color: var(--maui-color-interaction-buttonprimary);
    color: var(--maui-color-text-copy);
  }

  .four_y.inverted.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-interaction-selection-inverted);
    border-color: var(--maui-color-interaction-selection-inverted);
    color: var(--maui-color-interaction-selection);
  }

  .four_y.selectable.inverted:not(.selected, .disabled) .content {
    color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.inverted.medium .image {
    --_image-inset: 2px;
  }

  .four_y.inverted.large .image,
  .four_y.inverted.extra-large .image {
    --_image-inset: 3px;
  }
`, ip = s`
  .mmg {
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg.small {
    ${d({ size: "copy-extra-small", tenant: "mmg" })};
  }

  .mmg.medium {
    ${d({ size: "copy-small", tenant: "mmg" })};
  }

  .mmg.large,
  .mmg.extra-large {
    ${d({ size: "copy-large", tenant: "mmg" })};
  }

  .mmg:not(.selectable, .selected, .disabled) .content {
    display: grid;
    place-items: center;
    background-color: var(--maui-color-interaction-interaction);
    color: var(--maui-color-brand-light);
  }

  .mmg.selected:not(.selectable, .selected, .disabled) .content {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .mmg:not(.selectable, .selected, .disabled).inverted .content {
    background-color: var(--maui-color-brand-light);
    color: var(--maui-color-interaction-interaction);
  }

  /*.mmg.disabled:not(.selectable, .selected).inverted .content:hover,
  .mmg:not(.selectable, .selected, .disabled).inverted .content:focus {
    border-color: var(--maui-color-disabled-foreground-inverted);
    color: var(--maui-color-disabled-foreground-inverted);
  }*/

  .mmg.selectable:not(.selected):not(.disabled) .content {
    background-color: var(--maui-color-brand-light);
    border-color: var(--maui-color-interaction-buttonprimary);
    color: var(--maui-color-interaction-buttonprimary);
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg.selectable.selected:not(.disabled) .content {
    background-color: var(--maui-color-brand-light);
    border-color: var(--maui-color-interaction-interactionhover);
    color: var(--maui-color-interaction-interactionhover);
  }

  .mmg.selectable:not(.selected).disabled .content {
    background-color: var(--maui-color-brand-light);
    border-color: var(--maui-color-disabled-foreground);
    color: var(--maui-color-disabled-foreground);
  }

  .mmg.selectable.inverted:not(.selected, .disabled) .content,
  .mmg.selectable.inverted:not(.selected, .disabled):focus .content,
  .mmg.inverted.selectable.selected:not(.disabled) .content {
    background-color: transparent;
    border-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-brand-light);
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg.selectable.inverted:not(.selected, .disabled):hover .content,
  .mmg.selectable.inverted:not(.selected, .disabled):focus .content,
  .mmg.inverted.selectable.selected:not(.disabled) .content {
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    color: var(--maui-color-interaction-interaction-invertedhover);
  }

  .mmg.selectable.inverted:not(.selected).disabled .content {
    background-color: transparent;
    border-color: var(--maui-color-disabled-foreground-inverted);
    color: var(--maui-color-disabled-foreground-inverted);
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg.inverted.selectable.selected.disabled .content {
    color: var(--maui-color-interaction-interaction);
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg.small .image {
    aspect-ratio: var(--maui-image-aspect-ratio-square);
    --_image-inset: 1px;
  }

  .mmg.medium .image {
    aspect-ratio: var(--maui-image-aspect-ratio-square);
    --_image-inset: 2px;
  }

  .mmg.large .image,
  .mmg.extra-large .image {
    --_image-inset: 3px;
  }

  .mmg.inverted.small .image,
  .mmg.inverted.medium .image,
  .mmg.inverted.large .image,
  .mmg.inverted.extra-large .image {
    --_image-inset: 0;
  }
`, ap = [
  Wh,
  Zh,
  Qh,
  Jh,
  ep,
  op,
  tp,
  ip
];
var rp = Object.defineProperty, np = Object.getOwnPropertyDescriptor, ke = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? np(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && rp(e, t, i), i;
};
class he extends k {
  constructor() {
    super(), this.hasIndicator = !1, this.hasImage = !1, this.imageLoaded = !1, this.indicatorProps = { type: "default", value: void 0 }, this.type = "default", this.selected = !1, this.inverted = !1, this.size = "medium", this.disabled = !1, this.componentName = "avatar";
  }
  async disconnectedCallback() {
    await super.disconnectedCallback();
  }
  handleImageSlotChange(e) {
    const t = e.target, o = t.assignedElements();
    if (X(t, ["MAUI-IMAGE"], 1, !0), this.hasImage = o.length > 0, o.length === 0) {
      this.imageLoaded = !1;
      return;
    }
    o[0].setAttribute("aspectRatioVariant", "square");
    const i = o[0].querySelector("img");
    i?.complete ? this.imageLoaded = !0 : (i?.addEventListener("load", () => {
      this.imageLoaded = !0;
    }), i?.addEventListener("error", () => {
    }));
  }
  handleIndicatorSlotChange(e) {
    const t = e.target, o = t.assignedElements();
    X(t, ["MAUI-INDICATOR"], 1, !0), this.hasIndicator = o.length > 0, o.length > 0 && (o[0].setAttribute("size", this.size), (this.inverted || this.hasImage) && o[0].setAttribute("border", ""));
  }
  /** Requests to remove the indicator from the avatar. If the request event is not `defaultPrevented`, it removes the indicator. */
  async removeIndicator() {
    if (this.hasIndicator) {
      const e = new CustomEvent("maui-indicator-remove-request", {
        cancelable: !0
      });
      this.dispatchEvent(e), e.defaultPrevented || (this.indicatorSlot.assignedElements()[0].remove(), this.hasIndicator = !1);
    }
  }
  /** Required to match position offsets to indicator props */
  handleIndicatorChangeEvent(e) {
    const t = e.target;
    this.indicatorProps = {
      type: t.type,
      value: t.value
    };
  }
  async handleIndicatorChange() {
    this.hasIndicator && (this.emit("maui-indicator-added"), this.emit("maui-indicator-removed"));
  }
  handleImageChange() {
    this.hasImage && this.hasIndicator && this.indicatorSlot.assignedElements()[0].setAttribute("border", "");
  }
  async handleSizeChange() {
    this.hasIndicator && this.indicatorSlot.assignedElements()[0].setAttribute("size", this.size);
  }
  render() {
    const e = () => {
      switch (this.size) {
        case "small":
          return "small";
        case "medium":
          return "medium";
        case "large":
          return "large";
        case "extra-large":
          return "large";
        default:
          return "small";
      }
    };
    return u`<div
      class=${y({
      [this.theme]: !0,
      [this.componentName]: !0,
      [this.type]: !0,
      [this.size]: !0,
      "has-image": this.hasImage,
      anonymous: !this.initials,
      selected: this.type === "selectable" && this.selected,
      inverted: this.inverted,
      disabled: this.disabled
    })}
    >
      ${this.ariaLabel ? u`<span class="sr-only">${this.ariaLabel}</span>` : E}
      <div
        class=${y({
      indicator: !0,
      hidden: !this.hasIndicator || this.type === "selectable" && this.disabled,
      [this.indicatorProps.type]: !0,
      "no-content": this.indicatorProps.type === "default" && !this.indicatorProps.value
    })}
        .ariaHidden=${this.hasIndicator ? "false" : "true"}
      >
        <slot
          name="indicator"
          @slotchange=${this.handleIndicatorSlotChange}
          @maui-indicator-change=${this.handleIndicatorChangeEvent}
        ></slot>
      </div>
      <div class="content">
        ${this.initials ? u`<span class="initials"
              >${this.initials.slice(0, 2).toUpperCase()}</span
            >` : u`<maui-icon
              .size=${e()}
              class="anonymous"
              use="icon-profile"
              .theme=${this.theme}
            ></maui-icon>`}
        <slot
          class=${y({
      image: !0,
      loaded: this.imageLoaded
    })}
          ?hidden=${!this.hasImage || this.type === "selectable"}
          name="image"
          @slotchange=${this.handleImageSlotChange}
        ></slot>
      </div>
    </div>`;
  }
}
he.styles = ap;
ke([
  O()
], he.prototype, "hasIndicator", 2);
ke([
  O()
], he.prototype, "hasImage", 2);
ke([
  O()
], he.prototype, "imageLoaded", 2);
ke([
  O()
], he.prototype, "indicatorProps", 2);
ke([
  M('slot[name="indicator"]')
], he.prototype, "indicatorSlot", 2);
ke([
  l({ type: String, reflect: !0 })
], he.prototype, "initials", 2);
ke([
  l({ type: String, reflect: !0 })
], he.prototype, "type", 2);
ke([
  l({ type: Boolean, reflect: !0 })
], he.prototype, "selected", 2);
ke([
  l({ type: Boolean, reflect: !0 })
], he.prototype, "inverted", 2);
ke([
  l({ type: String, reflect: !0 })
], he.prototype, "size", 2);
ke([
  l({ type: Boolean, reflect: !0 })
], he.prototype, "disabled", 2);
ke([
  F("hasIndicator")
], he.prototype, "handleIndicatorChange", 1);
ke([
  F("hasImage")
], he.prototype, "handleImageChange", 1);
ke([
  F("size")
], he.prototype, "handleSizeChange", 1);
w("maui-avatar", he);
const sp = s`
  .action-container {
    container-type: inline-size;
  }

  .actions {
    display: flex;
    gap: var(--maui-spacing-4);
    flex-direction: column;
    flex-wrap: wrap;
  }

  @media screen and (max-width: ${S.mobile["max-width"]}px) {
    .actions {
      align-items: initial !important; /* override alignment from container query when media query takes over. */
    }
  }

  @media screen and (min-width: ${S.phablet["min-width"]}px) {
    .actions {
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }

    .left .actions {
      justify-content: flex-start;
    }

    .right .actions {
      justify-content: flex-end;
    }

    /* space-between for 1 button */
    .navigation .actions > :only-child {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }

    /* meta right aligned */
    .navigation .actions .meta {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }

    /* 2 elements primary secondary, secondary left aligned */
    .navigation .actions :first-child:nth-last-child(2) + .secondary {
      flex-grow: 1;
      display: flex;

      justify-content: flex-start;
    }

    .primary {
      order: 3;
    }

    .secondary {
      order: 2;
    }

    .meta {
      order: 1;
    }

    .navigation .primary {
      order: 3;
    }

    .navigation .secondary {
      order: 1;
    }

    .navigation .meta {
      order: 2;
    }
  }

  @container (max-width: ${S.mobile["max-width"]}px) {
    .action-container.form .actions,
    .action-container.navigation .actions,
    .action-container.dialog .actions {
      flex-direction: column;
    }

    .left .actions {
      align-items: flex-start;
    }

    .right .actions {
      align-items: flex-end;
    }

    .navigation .actions .primary {
      order: 1;
    }

    .navigation .actions .secondary {
      order: 2;
    }

    .navigation .actions .meta {
      order: 3;
    }
  }
`, lp = s`
  .os .actions {
    gap: var(--maui-spacing-3);
  }
`, cp = s`
  .four_y .actions {
    gap: 22px;
  }
`, dp = s`
  .mmg .actions {
    gap: var(--maui-spacing-5);
  }
`, up = [sp, lp, cp, dp];
var mp = Object.defineProperty, hp = Object.getOwnPropertyDescriptor, pp = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? hp(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && mp(e, t, i), i;
};
class xr extends k {
  constructor() {
    super(), this.hasSlotController = new be(
      this,
      "primary",
      "secondary",
      "meta"
    ), this.type = "form", this.componentName = "action-container";
  }
  handleSlotChange(e) {
    const t = e.target, o = t.name, i = (r) => {
      r.setAttribute("width", "full"), r.setAttribute("theme", this.theme);
    };
    switch (o) {
      case "primary": {
        X(
          t,
          ["MAUI-BUTTON", "MAUI-BUTTON-LINK"],
          1,
          !0
        ), t.assignedElements().forEach((r) => {
          i(r);
        });
        break;
      }
      case "secondary": {
        X(
          t,
          ["MAUI-BUTTON", "MAUI-BUTTON-LINK"],
          1,
          !0
        ), t.assignedElements().forEach((r) => {
          i(r);
        });
        break;
      }
      case "meta": {
        X(
          t,
          [
            "MAUI-NAVIGATION-LINK",
            "MAUI-FUNCTIONAL-LINK",
            "MAUI-LINK-BUTTON",
            "MAUI-SERVICE-LINK",
            "MAUI-ICON-LINK"
          ],
          1,
          !0
        );
        break;
      }
    }
  }
  render() {
    const e = () => this.theme === "os" && this.type === "dialog" ? "left" : "right", t = this.hasSlotController.test("secondary"), o = this.hasSlotController.test("meta");
    return u` <div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.type]: !0,
      [e()]: !0
    })}
    >
      <div class="actions">
        <div class="primary">
          <slot name="primary" @slotchange=${this.handleSlotChange}></slot>
        </div>
        ${t ? u`<div class="secondary">
              <slot
                name="secondary"
                @slotchange=${this.handleSlotChange}
              ></slot>
            </div>` : ""}
        ${o ? u`<div class="meta">
              <slot name="meta" @slotchange=${this.handleSlotChange}></slot>
            </div>` : ""}
      </div>
    </div>`;
  }
}
xr.styles = up;
pp([
  l({ type: String })
], xr.prototype, "type", 2);
w("maui-action-container", xr);
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
function* gp(a, e) {
  if (a !== void 0) {
    let t = 0;
    for (const o of a)
      yield e(o, t++);
  }
}
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
function* bp(a, e, t = 1) {
  const o = e === void 0 ? 0 : a;
  e ??= a;
  for (let i = o; t > 0 ? i < e : e < i; i += t)
    yield i;
}
const ps = (a) => {
  const e = h(a);
  return s`
    .${e}.hint {
      ${p({ size: "forms-small", tenant: a })};
      padding-block: 2px;
    }
  `;
}, vp = s`
  ${C}

  ${A}

  :host {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
  }

  .hint {
    font-family: var(--maui-font-family-copy, sans-serif);
    ${p({ size: "forms-small", tenant: "wl" })};
    color: var(--maui-hint-color-override, var(--maui-color-text-caption));
  }

  .hint.inverted {
    color: var(
      --maui-hint-color-inverted-override,
      var(--maui-color-text-caption-inverted)
    );
  }
`, fp = s`
  ${ps("lh")}
`, yp = s`
  .os.hint {
    ${p({ size: "forms-small", tenant: "os" })};
    padding-block: 4px;
  }
`, xp = s`
  .lx.hint {
    ${p({ size: "forms-small", tenant: "lx" })};
    padding-block: 2px;
  }
`, $p = s`
  .sn.hint {
    ${p({ size: "forms-small", tenant: "sn" })};
    padding-block: 2px;
  }
`, wp = s`
  ${ps("b2b")}
`, _p = s`
  .four_y.hint {
    ${p({ size: "forms-small", tenant: "four_y" })};
  }
`, kp = s`
  .mmg.hint {
    ${p({ size: "forms-small", tenant: "mmg" })};
  }
`, Sp = [
  vp,
  yp,
  $p,
  fp,
  xp,
  wp,
  _p,
  kp
];
var Op = Object.defineProperty, Mp = Object.getOwnPropertyDescriptor, Lp = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Mp(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && Op(e, t, i), i;
};
class $r extends k {
  constructor() {
    super(), this.inverted = !1, this.componentName = "hint";
  }
  render() {
    return u`<span
      class="${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      inverted: this.inverted
    })}"
      ><slot></slot
    ></span>`;
  }
}
$r.styles = Sp;
Lp([
  l({ type: Boolean })
], $r.prototype, "inverted", 2);
w("maui-hint", $r);
const Bp = s`
  ${C}

  ${A}

  :host {
    display: inline;
    position: relative;
    line-height: 0;
  }

  label {
    font-family: var(--maui-font-family-copy, sans-serif);
    ${p({ size: "forms-small", tenant: "wl" })};
    font-weight: var(--maui-font-weight-regular, 400);
    color: var(--maui-label-color-override, var(--maui-color-text-caption));
  }

  label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Cp = s`
  .sn.label {
    ${p({ size: "forms-small", tenant: "sn" })};
    color: var(--maui-label-color-override, var(--maui-color-text-label));
  }

  .sn.label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, zp = s`
  .os.label {
    ${p({ size: "forms-small", tenant: "os" })};
  }

  .os.label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Ap = s`
  .lh.label {
    ${p({ size: "forms-small", tenant: "lh" })};
  }

  .lh.label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Fp = s`
  .b2b.label {
    ${p({ size: "forms-small", tenant: "b2b" })};
  }

  label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Np = s`
  .lx.label {
    ${p({ size: "forms-small", tenant: "lx" })};
    color: var(--maui-label-color-override, var(--maui-color-text-label));
  }
  .four_y.label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Ip = s`
  .four_y.label {
    ${p({ size: "forms-small", tenant: "four_y" })};
    color: var(--maui-label-color-override, var(--maui-color-text-label));
  }
  .four_y.label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Up = s`
  .mmg.label {
    ${p({ size: "forms-small", tenant: "mmg" })};
  }

  .mmg.label.inverted {
    color: var(
      --maui-label-color-inverted-override,
      var(--maui-color-text-label-inverted)
    );
  }
`, Rp = [
  Bp,
  Cp,
  Ap,
  Np,
  Fp,
  zp,
  Ip,
  Up
];
var Dp = Object.defineProperty, Ep = Object.getOwnPropertyDescriptor, gs = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Ep(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && Dp(e, t, i), i;
};
class fa extends k {
  constructor() {
    super(), this.inverted = !1, this.componentName = "label";
  }
  render() {
    return u`<label
      class="${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      inverted: this.inverted
    })}"
      for=${this.for}
      ><slot></slot
    ></label>`;
  }
}
fa.styles = Rp;
gs([
  l()
], fa.prototype, "for", 2);
gs([
  l({ type: Boolean })
], fa.prototype, "inverted", 2);
w("maui-label", fa);
const Pp = s`
  ${C}

  ${A}

  :host(:focus) {
    outline: none;
  }

  /* Please do not REMOVE the variable --maui-select-option-padding on any tenant, as it is the default value */
  li {
    padding: var(
      --maui-select-option-padding-override,
      var(--maui-select-option-padding)
    );
    font-weight: var(--maui-select-option-font-weight);
    ${p({ size: "forms-large", tenant: "wl" })};
    color: var(--maui-select-option-color);
    font-family: var(--maui-font-family-copy);
    cursor: pointer;
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  li.is-current {
    background-color: var(--maui-select-option-background-hover);
    color: var(--maui-select-option-color-hover);
  }

  .is-selected {
    background-color: var(--maui-select-option-background-selected);
    color: var(--maui-select-option-color-hover);
    font-weight: var(
      --maui-select-option-font-weight-bold,
      var(--maui-select-option-font-weight)
    );
  }
  .is-current.is-selected {
    background-color: var(--maui-select-option-background-selected-hover);
  }
`, Hp = s`
  .lh {
    --maui-select-option-padding: 10px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }

  li.lh {
    ${p({ size: "forms-large", tenant: "lh" })};
  }
`, Gp = s`
  .os {
    --maui-select-option-padding: 12px 12px 13px 12px;
    --maui-select-option-font-size: var(--maui-font-size-2);
    --maui-select-option-line-height: var(--maui-line-height-2);
    --maui-select-option-font-weight: 400;
    --maui-select-option-color: var(--maui-color-text-copy);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
    font-weight: var(--maui-font-weight-regular);
  }

  li.os {
    ${p({ size: "forms-large", tenant: "os" })};
  }

  li.os.is-selected {
    font-weight: var(--maui-font-weight-bold);
  }
`, Yp = s`
  .lx {
    --maui-select-option-padding: 12px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }

  li.lx {
    ${p({ size: "forms-large", tenant: "lx" })};
  }
`, Tp = s`
  .sn {
    --maui-select-option-padding: 12px 10px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }

  li.sn {
    ${p({ size: "forms-large", tenant: "sn" })};
  }
`, Xp = s`
  .b2b {
    --maui-select-option-padding: 8px 14px 8px 14px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(
      --maui-color-grey-07
    ); /* --maui-color-text-caption */
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  li.b2b {
    ${p({ size: "forms-large", tenant: "b2b" })};
  }
`, Vp = s`
  .four_y {
    --maui-select-option-padding: var(--maui-spacing-3);
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-interaction
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  li.four_y {
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y.is-selected {
    font-weight: var(--maui-font-weight-bold);
  }
`, jp = s`
  .mmg {
    --maui-select-option-padding: var(--maui-spacing-3);
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-interaction-interaction);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  li.mmg {
    ${p({ size: "forms-large", tenant: "mmg" })};
  }

  .mmg.is-selected {
    font-weight: var(--maui-font-weight-bold);
  }
`, qp = [
  Pp,
  Hp,
  Gp,
  Yp,
  Tp,
  Xp,
  Vp,
  jp
];
var Kp = Object.defineProperty, Wp = Object.getOwnPropertyDescriptor, Ht = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Wp(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && Kp(e, t, i), i;
};
class nt extends k {
  constructor() {
    super(), this.isSelected = !1, this.isCurrent = !1, this.componentName = "option";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false");
  }
  firstUpdated() {
    this.isSelected && (this.setAttribute("aria-selected", this.isSelected ? "true" : "false"), this.emit("maui-init-selected", {
      detail: this
    }));
  }
  handleSelectedChange() {
    this.setAttribute("aria-selected", this.isSelected ? "true" : "false"), this.isSelected && this.emit("maui-selected", {
      detail: this
    });
  }
  handleLabelChange() {
    this.ariaLabel = this.ariaLabel || this.label || null;
  }
  render() {
    return u`<li
      class="${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      "is-selected": !!this.isSelected,
      "is-current": !!this.isCurrent
    })}"
    >
      <slot></slot>
    </li>`;
  }
}
nt.styles = qp;
Ht([
  l({ type: String, reflect: !0 })
], nt.prototype, "optionValue", 2);
Ht([
  l({ type: String })
], nt.prototype, "label", 2);
Ht([
  l({ type: Boolean, attribute: "selected", reflect: !0 })
], nt.prototype, "isSelected", 2);
Ht([
  O()
], nt.prototype, "isCurrent", 2);
Ht([
  O()
], nt.prototype, "originalOption", 2);
Ht([
  M("slot")
], nt.prototype, "defaultSlot", 2);
Ht([
  F("isSelected", { waitUntilFirstUpdate: !0 })
], nt.prototype, "handleSelectedChange", 1);
Ht([
  F("label")
], nt.prototype, "handleLabelChange", 1);
w("maui-option", nt);
const Zp = s`
  ${C}

  ${A}

  :host(:focus) {
    outline: none;
  }

  .optgroup {
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-caption);
    font-weight: var(--maui-font-weight-bold);
    display: flex;
    flex-direction: column;
    font-weight: 700;
    align-self: stretch;
    list-style-type: none;
  }

  .label {
    padding: 8px var(--maui-spacing-3, 10px);
    ${d({ size: "copy-small", tenant: "wl" })};
  }

  .special-class {
    border: none;
  }

  ul {
    padding-left: 0;
    margin: 0;
  }

  .borderTop {
    border-top: 1px solid var(--maui-color-grey-04);
  }
`, Qp = s`
  .lh .label {
    ${d({ size: "copy-small", tenant: "lh" })};
  }
`, Jp = s`
  .os {
    --maui-select-option-padding: 12px 12px 13px 12px;
    --maui-select-option-font-weight: 400;
    --maui-select-option-color: var(--maui-color-text-copy);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
  }

  .os .label {
    color: var(--maui-color-text-copy);
    ${d({ size: "copy-small", tenant: "os" })};
    padding: var(--maui-spacing-3, 12px) var(--maui-spacing-3, 12px)
      var(--maui-spacing-2, 6px) var(--maui-spacing-3, 12px);
  }
`, eg = s`
  .lx {
    --maui-select-option-padding: 12px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }

  .lx .label {
    ${d({ size: "copy-small", tenant: "lx" })};
  }
`, tg = s`
  .sn {
    --maui-select-option-padding: 12px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  .sn .label {
    color: var(--maui-color-text-copy);
    ${d({ size: "copy-small", tenant: "sn" })};
    font-weight: var(--maui-font-weight-regular);
    padding: 9px 12px 7px 12px;
  }
`, og = s`
  .b2b {
    --maui-select-option-padding: 8px 14px 8px 14px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(
      --maui-color-grey-07
    ); /* --maui-color-text-caption */
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  .b2b .label {
    ${d({ size: "copy-small", tenant: "b2b" })};
  }
`, ig = s`
  .four_y {
    --maui-select-option-padding: 12px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-white);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-select-option-background-hover
    );
  }

  .four_y .label {
    color: var(--maui-color-text-copy);
    ${d({ size: "copy-small", tenant: "four_y" })};
    font-weight: var(--maui-font-weight-regular);
    padding: 9px 12px 7px 12px;
  }
`, ag = s`
  .mmg {
    --maui-select-option-padding: 12px;
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    --maui-select-option-color: var(--maui-color-text-caption);
    --maui-select-option-color-hover: var(--maui-color-brand-light);
    --maui-select-option-background-hover: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-select-option-background-selected: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-select-option-background-selected-hover: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }

  .mmg .label {
    ${d({ size: "copy-small", tenant: "mmg" })};
  }
`, rg = [
  Zp,
  Qp,
  Jp,
  eg,
  tg,
  og,
  ig,
  ag
];
var ng = Object.defineProperty, sg = Object.getOwnPropertyDescriptor, bs = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? sg(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && ng(e, t, i), i;
};
class ya extends k {
  constructor() {
    super(), this.hasTopBorder = !1, this.componentName = "optgroup";
  }
  connectedCallback() {
    super.connectedCallback();
  }
  // Should we check for parent node here that is must be in autocomplete / select?
  handleOptionsSlotChange(e) {
    const t = e.target;
    X(t, ["LI", "MAUI-OPTION"]);
  }
  render() {
    return this.label = this.label || "Subheadline", u`
      <ul
        class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      borderTop: this.hasTopBorder
    })}
        role="group"
        aria-label="${this.label}"
      >
        <span class="label">${this.label}</span>
        <slot @slotchange=${this.handleOptionsSlotChange}></slot>
      </ul>
    `;
  }
}
ya.styles = rg;
bs([
  l({ type: Boolean })
], ya.prototype, "hasTopBorder", 2);
bs([
  l({ type: String })
], ya.pro