tribute: "no-header-spacing", type: Boolean })
], Q.prototype, "noHeaderSpacing", 2);
oe([
  l({ attribute: "no-content-spacing", type: Boolean })
], Q.prototype, "noContentSpacing", 2);
oe([
  l({ attribute: "no-footer-spacing", type: Boolean })
], Q.prototype, "noFooterSpacing", 2);
oe([
  l({ type: String })
], Q.prototype, "size", 2);
oe([
  F("open", { waitUntilFirstUpdate: !0 })
], Q.prototype, "handleOpenChange", 1);
xo("modal.show", {
  keyframes: [{ opacity: 0 }, { opacity: 1 }],
  options: { duration: 250, easing: "ease" }
});
xo("modal.hide", {
  keyframes: [{ opacity: 1 }, { opacity: 0 }],
  options: { duration: 250, easing: "ease" }
});
xo("modal.denyClose", {
  keyframes: [
    { transform: "translateX(0)" },
    { transform: "translateX(10px)" },
    { transform: "translateX(-10px)" },
    { transform: "translateX(0)" }
  ],
  options: { duration: 250 }
});
xo("modal.overlay.show", {
  keyframes: [{ opacity: 0 }, { opacity: 1 }],
  options: { duration: 250 }
});
xo("modal.overlay.hide", {
  keyframes: [{ opacity: 1 }, { opacity: 0 }],
  options: { duration: 250 }
});
w("maui-modal", Q);
const Us = (a) => {
  const e = h(a);
  return s`
    .${e}.notification:not(.small) .noHeadline {
      margin-top: 3px;
    }
    .${e}.notification.info maui-icon {
      --maui-icon-color: var(--maui-color-brand-lhdeepblue);
    }
    .${e}.notification.warning maui-icon {
      --maui-icon-color: var(--maui-color-brand-lhdeepblue);
    }

    .${e} .headline {
      ${p({ size: "notification", tenant: a })};
    }

    .${e}.notification.inline::before {
      background-color: transparent;
      width: 0;
      height: 0;
      left: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
      transform: initial;
      border-top: 0;
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
      border-bottom: 12px solid red;
    }
    .${e}.notification.inline.info::before {
      background-color: transparent;
      border-bottom-color: var(--maui-color-message-bg-info);
    }
    .${e}.notification.inline.success::before {
      background-color: transparent;
      border-bottom-color: var(--maui-color-message-bg-success);
    }
    .${e}.notification.inline.warning::before {
      background-color: transparent;
      border-bottom-color: var(--maui-color-message-bg-warning);
    }
    .${e}.notification.inline.error::before {
      background-color: transparent;
      border-bottom-color: var(--maui-color-message-bg-error);
    }
  `;
}, by = s`
  ${C}

  ${A}

  .notification {
    padding: var(--maui-notification-padding-override, 18px 18px 18px 14px);
    position: relative;
  }

  .small {
    padding-inline: var(--maui-spacing-3);
    padding-block: var(--maui-spacing-2);
  }

  .content slot[name='action'] {
    display: flex;
    flex-direction: column;
    row-gap: var(--maui-spacing-3);
    column-gap: var(--maui-spacing-4);
    order: 1;
  }

  .content slot[name='cta'] {
    display: flex;
    order: 2;
  }

  .actions {
    display: flex;
    flex-direction: column;
    row-gap: var(--maui-spacing-3);
    column-gap: var(--maui-spacing-4);
    padding-top: 4px;
  }

  .notification-content {
    display: grid;
    gap: var(--maui-spacing-3);
    grid-auto-flow: column;
    position: relative;
    grid-template-columns: 24px 10fr;
  }

  .notification.info,
  .notification.inline.info::before {
    background: var(--maui-color-message-bg-info);
  }
  .notification.info maui-icon {
    --maui-icon-color: var(--maui-color-message-info);
  }

  .notification.success,
  .notification.inline.success::before {
    background: var(--maui-color-message-bg-success);
  }
  .notification.success maui-icon {
    --maui-icon-color: var(--maui-color-message-success);
  }

  .notification.warning,
  .notification.inline.warning::before {
    background: var(--maui-color-message-bg-warning);
  }
  .notification.warning maui-icon {
    --maui-icon-color: var(--maui-color-message-warning);
  }

  .notification.error,
  .notification.inline.error::before {
    background: var(--maui-color-message-bg-error);
  }
  .notification.error maui-icon {
    --maui-icon-color: var(--maui-color-message-error);
  }

  .content {
    display: grid;
    gap: var(--maui-spacing-3);
    text-align: left;
  }

  .notification:has(.headline) .content {
    padding-top: 1px;
  }

  .notification.inline {
    margin-top: 22px;
  }

  .notification.inline::before {
    position: absolute;
    top: -12px;
    left: 40px;
    content: '';
    height: 34px;
    width: 34px;
    transform: rotate(45deg);
  }

  .content-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-gap: var(--maui-spacing-3);
  }

  .close {
    text-align: right;
    line-height: 0;
    width: 24px;
    height: 24px;
    position: relative;
  }

  .headline {
    display: block;
  }

  @media screen and (min-width: ${S.phablet["min-width"]}px) {
    .actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--maui-spacing-3);
      column-gap: var(--maui-spacing-4);
    }

    .content slot[name='action'] {
      order: 2;
      flex-direction: row;
    }

    .content slot[name='cta'] {
      order: 1;
    }
  }
`, vy = s`
  ${Us("lh")}
`, fy = s`
  .os.notification:not(.small) .noHeadline {
    margin-top: 1px;
  }
  .os.notification:not(.small) {
    padding: var(--maui-notification-padding-override, 18px);
  }

  .os.notification.info maui-headline,
  .os.notification.info maui-icon-link,
  .os.notification.info ::slotted(maui-icon-link),
  .os.notification.info ::slotted(maui-navigation-link),
  .os.notification.info ::slotted(maui-functional-link),
  .os.notification.info ::slotted(maui-service-link),
  .os.notification.info ::slotted(maui-copy),
  .os.notification.info ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-info);
    --maui-color-interaction-interaction: var(--maui-color-message-info);
    --maui-color-text-copy: var(--maui-color-message-info);
    --maui-button-muted-color: var(--maui-color-message-info);
  }

  .os.notification.success maui-headline,
  .os.notification.success maui-icon-link,
  .os.notification.success ::slotted(maui-icon-link),
  .os.notification.success ::slotted(maui-navigation-link),
  .os.notification.success ::slotted(maui-functional-link),
  .os.notification.success ::slotted(maui-service-link),
  .os.notification.success ::slotted(maui-copy),
  .os.notification.success ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-success);
    --maui-color-interaction-interaction: var(--maui-color-message-success);
    --maui-color-text-copy: var(--maui-color-message-success);
    --maui-button-muted-color: var(--maui-color-message-success);
  }

  .os.notification.warning maui-headline,
  .os.notification.warning maui-icon-link,
  .os.notification.warning ::slotted(maui-icon-link),
  .os.notification.warning ::slotted(maui-navigation-link),
  .os.notification.warning ::slotted(maui-functional-link),
  .os.notification.warning ::slotted(maui-service-link),
  .os.notification.warning ::slotted(maui-copy),
  .os.notification.warning ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-warning);
    --maui-color-interaction-interaction: var(--maui-color-message-warning);
    --maui-color-text-copy: var(--maui-color-message-warning);
    --maui-button-muted-color: var(--maui-color-message-warning);
  }

  .os.notification.error maui-headline,
  .os.notification.error maui-icon-link,
  .os.notification.error ::slotted(maui-icon-link),
  .os.notification.error ::slotted(maui-navigation-link),
  .os.notification.error ::slotted(maui-functional-link),
  .os.notification.error ::slotted(maui-service-link),
  .os.notification.error ::slotted(maui-copy),
  .os.notification.error ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-error);
    --maui-color-interaction-interaction: var(--maui-color-message-error);
    --maui-color-text-copy: var(--maui-color-message-error);
    --maui-button-muted-color: var(--maui-color-message-error);
  }

  .os.notification .headline {
    ${p({ size: "notification", tenant: "os" })};
  }

  .os.inline {
    margin-top: var(--maui-spacing-3);
  }

  .os.small .notification-content {
    gap: var(--maui-spacing-2);
  }

  .os.notification.inline::before {
    background-color: transparent;
    width: 0;
    height: 0;
    left: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
    transform: initial;
    border-top: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 12px solid red;
  }
  .os.notification.inline.info::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-info);
  }
  .os.notification.inline.success::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-success);
  }
  .os.notification.inline.warning::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-warning);
  }
  .os.notification.inline.error::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-error);
  }
`, yy = s`
  .lx.notification:not(.small) .noHeadline {
    margin-top: 2px;
  }

  .lx.notification:not(.small) {
    padding: var(--maui-notification-padding-override, 20px 20px 22px 14px);
  }

  .lx.notification .headline {
    ${p({ size: "notification", tenant: "lx" })};
  }
  .lx.notification maui-icon {
    --maui-icon-color: var(--maui-color-grey-08) !important;
  }
  .lx.notification ::slotted(maui-icon-link),
  .lx.notification ::slotted(maui-navigation-link),
  .lx.notification ::slotted(maui-functional-link),
  .lx.notification ::slotted(maui-service-link),
  .lx.notification ::slotted(maui-copy) {
    --maui-color-interaction-interaction: var(--maui-color-brand-pine-grey);
    --maui-color-interaction-interactionhover: var(--maui-color-grey-08);
  }

  .lx.inline {
    margin-top: 12px;
  }

  .lx.notification.inline::before {
    background-color: transparent;
    width: 0;
    height: 0;
    left: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
    transform: initial;
    border-top: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 12px solid red;
  }
  .lx.notification.inline.info::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-info);
  }
  .lx.notification.inline.success::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-success);
  }
  .lx.notification.inline.warning::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-warning);
  }
  .lx.notification.inline.error::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-error);
  }

  .lx .close {
    top: -2px;
  }
`, xy = s`
  .sn.notification:not(.small) {
    padding: var(--maui-notification-padding-override, 15px 20px 15px 10px);
  }
  .sn.notification .notification-content {
    gap: var(--maui-spacing-2);
  }
  .sn.notification .content-wrapper {
    margin-right: 5px;
  }
  .sn.notification:not(.small) .noHeadline {
    margin-top: 0px;
  }
  .sn.notification ::slotted(maui-navigation-link) {
    --maui-color-interaction-interaction: var(
      --maui-color-text-copy
    ) !important;
    --maui-color-interaction-interactionhover: var(--maui-color-text-copy);
  }

  .sn.notification.inline {
    margin-top: 12px;
  }

  .sn.notification.inline::before {
    background-color: transparent;
    width: 0;
    height: 0;
    left: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
    transform: initial;
    border-top: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 12px solid red;
  }

  .sn.notification .headline {
    ${p({ size: "notification", tenant: "sn" })};
  }

  .sn.notification.error ::slotted(maui-button) {
    --maui-button-muted-coloroverride: var(--maui-color-message-error);
    --maui-button-muted-hovercoloroverride: var(--maui-color-message-error);
  }

  .sn.notification.error ::slotted(maui-navigation-link) {
    --maui-color-interaction-interaction: var(
      --maui-color-message-error
    ) !important;
    --maui-color-interaction-interactionhover: var(
      --maui-color-message-error
    ) !important;
  }

  .sn.notification.inline.info::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-info);
  }
  .sn.notification.inline.success::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-success);
  }
  .sn.notification.inline.warning::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-warning);
  }
  .sn.notification.inline.error::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-error);
  }

  .sn .close {
    top: -4px;
  }
`, $y = s`
  ${Us("b2b")}
`, wy = s`
  .four_y {
    border-radius: var(--maui-radii-radius-2);
  }

  .four_y.notification:not(.small) {
    padding: var(
      --maui-notification-padding-override,
      calc(var(--maui-spacing-3) + var(--maui-spacing-2))
        calc(var(--maui-spacing-3) + var(--maui-spacing-2))
        calc(var(--maui-spacing-3) + var(--maui-spacing-2))
        var(--maui-spacing-3)
    );
  }

  .four_y .headline {
    ${p({ size: "notification", tenant: "four_y" })};
    color: var(--maui-color-text-copy);
  }

  .four_y.notification:not(.small) .noHeadline {
    margin-top: 4px;
  }

  .four_y.inline {
    margin-top: var(--maui-spacing-3);
  }

  .four_y.notification.inline::before {
    background-color: transparent;
    width: 0;
    height: 0;
    left: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
    transform: initial;
    border-top: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 12px solid red;
  }

  .four_y.notification.info ::slotted(maui-icon-link),
  .four_y.notification.info ::slotted(maui-navigation-link),
  .four_y.notification.info ::slotted(maui-functional-link),
  .four_y.notification.info ::slotted(maui-service-link),
  .four_y.notification.info ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-info);
    --maui-color-interaction-interaction: var(--maui-color-message-info);
    --maui-color-interaction-interactionhover: var(--maui-color-message-info);
    --maui-button-muted-color: var(--maui-color-message-info);
    --maui-focus-outline-box-shadow: 0 0 0 1px var(--maui-color-message-info);
  }

  .four_y.notification.warning ::slotted(maui-icon-link),
  .four_y.notification.warning ::slotted(maui-navigation-link),
  .four_y.notification.warning ::slotted(maui-functional-link),
  .four_y.notification.warning ::slotted(maui-service-link),
  .four_y.notification.warning ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-warning);
    --maui-color-interaction-interaction: var(--maui-color-message-warning);
    --maui-color-interaction-interactionhover: var(
      --maui-color-message-warning
    );
    --maui-button-muted-color: var(--maui-color-message-warning);
    --maui-focus-outline-box-shadow: 0 0 0 1px var(--maui-color-message-warning);
  }

  .four_y.notification.success ::slotted(maui-icon-link),
  .four_y.notification.success ::slotted(maui-navigation-link),
  .four_y.notification.success ::slotted(maui-functional-link),
  .four_y.notification.success ::slotted(maui-service-link),
  .four_y.notification.success ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-success);
    --maui-color-interaction-interaction: var(--maui-color-message-success);
    --maui-color-interaction-interactionhover: var(
      --maui-color-message-success
    );
    --maui-button-muted-color: var(--maui-color-message-success);
    --maui-focus-outline-box-shadow: 0 0 0 1px var(--maui-color-message-success);
  }

  .four_y.notification.error ::slotted(maui-icon-link),
  .four_y.notification.error ::slotted(maui-navigation-link),
  .four_y.notification.error ::slotted(maui-functional-link),
  .four_y.notification.error ::slotted(maui-service-link),
  .four_y.notification.error ::slotted(maui-button) {
    --maui-icon-color: var(--maui-color-message-error);
    --maui-color-interaction-interaction: var(--maui-color-message-error);
    --maui-color-interaction-interactionhover: var(--maui-color-message-error);
    --maui-button-muted-color: var(--maui-color-message-error);
    --maui-focus-outline-box-shadow: 0 0 0 1px var(--maui-color-message-error);
  }

  .four_y.notification.inline.info::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-info);
  }
  .four_y.notification.inline.success::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-success);
  }
  .four_y.notification.inline.warning::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-warning);
  }
  .four_y.notification.inline.error::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-error);
  }
`, _y = s`
  .mmg.notification {
    padding: var(--maui-notification-padding-override, var(--maui-spacing-4));
  }

  .mmg.notification .content-wrapper {
    margin-right: 5px;
  }

  .mmg.notification.info maui-icon,
  .mmg.notification.success maui-icon,
  .mmg.notification.error maui-icon,
  .mmg.notification.warning maui-icon {
    margin-bottom: calc(var(--maui-spacing-0) * -1);
  }

  .mmg .content {
    gap: var(--maui-spacing-2);
  }

  .mmg.notification .noHeadline {
    margin-top: 0px;
  }

  .mmg.notification .noHeadline .content {
    padding-top: var(--maui-spacing-1);
  }

  .mmg .actions {
    padding: 12px 18px 8px 0px;
  }

  .mmg .content slot[name='action'] {
    order: 1;
    font-family: var(--maui-font-family-headline);
  }

  .mmg .content slot[name='cta'] {
    display: grid;
    order: 2;
  }

  .mmg.notification.inline {
    margin-top: 12px;
  }

  .mmg.notification.inline::before {
    background-color: transparent;
    width: 0;
    height: 0;
    left: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
    transform: initial;
    border-top: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 12px solid red;
  }

  .mmg.notification .headline {
    ${p({ size: "notification", tenant: "mmg" })};
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg.notification.inline.info::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-info);
  }
  .mmg.notification.inline.success::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-success);
  }
  .mmg.notification.inline.warning::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-warning);
  }
  .mmg.notification.inline.error::before {
    background-color: transparent;
    border-bottom-color: var(--maui-color-message-bg-error);
  }

  .mmg .icon {
    width: var(--maui-spacing-6);
  }
`, ky = [
  by,
  fy,
  $y,
  xy,
  vy,
  yy,
  wy,
  _y
];
var Sy = Object.defineProperty, Oy = Object.getOwnPropertyDescriptor, je = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Oy(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 && Sy(e, t, i), i;
};
class ze extends k {
  constructor() {
    super(), this.hasSlotController = new be(this, "action"), this._visible = !0, this.type = "info", this.inline = !1, this.dismissable = !1, this.headlineHidden = !1, this.small = !1, this.assistiveDismiss = "Dismiss", this.headlineType = "h4", this.componentName = "notification";
  }
  /** Test slotted elements to be only of types copy, button or navigational link. If anything else is present, don't show that specific child */
  testAllowedAssignments(e, t, o) {
    const i = e.target.assignedNodes(), r = e.target.assignedElements();
    if (o && ["action", "cta"].includes(o) && i.length > 0 && i.forEach((n) => {
      if (t.includes(n.nodeName) ? n.setAttribute("theme", this.theme) : (n.nodeName !== "#text" && console.error(
        `Only ${t.join(
          ", "
        )} are accepted as a child component. If a link or button has been used for primary action, please use slot="action" or slot="cta" respectively. Removed: ${n.nodeName}`
      ), n.parentNode.removeChild(n)), o === "action") {
        const c = [
          "MAUI-LINK",
          "MAUI-FUNCTIONAL-LINK",
          "MAUI-NAVIGATION-LINK",
          "MAUI-SERVICE-LINK"
        ];
        Ya(i, c, 2), i.filter(
          (g) => c.indexOf(g.nodeName) >= 0
        )[0] && e.target.removeAttribute("hidden");
      }
      if (o === "cta") {
        Ya(i, ["MAUI-BUTTON"], 1);
        const c = i.filter(
          (m) => m.nodeName === "MAUI-BUTTON"
        )[0];
        c && (e.target.removeAttribute("hidden"), c.setAttribute("type", "muted"), c.setAttribute("width", "full"), c.setAttribute("theme", this.theme));
      }
      ["four_y"].includes(this.theme) && (r.filter(
        (c) => [
          "MAUI-LINK",
          "MAUI-FUNCTIONAL-LINK",
          "MAUI-NAVIGATION-LINK",
          "MAUI-SERVICE-LINK",
          "MAUI-ICON-LINK"
        ].indexOf(c.nodeName) >= 0
      ).forEach((c) => {
        c.setAttribute("size", "small");
      }), r.filter((c) => ["MAUI-BUTTON"].indexOf(c.nodeName) >= 0).forEach((c) => {
        c.setAttribute("size", "small");
      })), ["mmg"].includes(this.theme) && r.filter(
        (c) => [
          "MAUI-LINK",
          "MAUI-FUNCTIONAL-LINK",
          "MAUI-NAVIGATION-LINK",
          "MAUI-SERVICE-LINK",
          "MAUI-ICON-LINK"
        ].indexOf(c.nodeName) >= 0
      ).forEach((c) => {
        c.setAttribute("size", "large");
      });
    }), !o && i.length === 0 && !this.headline) {
      console.error(
        "No headline or child of type MAUI-COPY detected! Content is mandatory."
      );
      const n = document.createElement("maui-copy");
      n.textContent = "Please provide content of MAUI-COPY or set a headline", this.append(n);
    }
    ["four_y"].includes(this.theme) && i.filter((n) => ["MAUI-COPY"].indexOf(n.nodeName) >= 0).forEach((n) => {
      n.setAttribute("size", "copy-small");
    });
  }
  handleSlotChange(e) {
    const t = e.target, o = (i) => i === "action" ? [
      "MAUI-LINK",
      "MAUI-FUNCTIONAL-LINK",
      "MAUI-NAVIGATION-LINK",
      "MAUI-SERVICE-LINK",
      "MAUI-LINK-LIST"
    ] : i === "cta" ? ["MAUI-BUTTON"] : ["MAUI-COPY"];
    this.testAllowedAssignments(
      e,
      o(t.getAttribute("name")),
      t.getAttribute("name")
    );
  }
  async dismiss() {
    if (this._visible) {
      this.emit("maui-hide");
      const e = io(this, "notification.dismiss"), t = io(this, "notification.contentFade");
      await Promise.all([
        oo(this.content, t.keyframes, t.options)
      ]), await Promise.all([
        oo(
          this.notification,
          e.keyframes,
          e.options
        ).then(() => {
          this._visible = !1;
        })
      ]), this.emit("maui-after-hide");
    }
  }
  render() {
    const e = this.type ? this.type : "info", { dismissable: t } = this, o = `icon-${e}`, i = this.hasSlotController.test("action"), r = this.hasSlotController.test("cta");
    return this.emit("maui-visible"), u`
      <div
        class="${y({
      inline: this.inline && !this.small,
      visible: this._visible,
      [this.componentName]: !0,
      [this.theme]: !0,
      [e]: !0,
      small: this.small
    })}"
      >
        <div class="notification-content">
          <maui-icon
            name="status-icon"
            .theme=${this.theme}
            .size=${"medium"}
            .use=${o}
          >
          </maui-icon>
          <div
            class="${y({
      "content-wrapper": !0,
      noHeadline: !this.headline || this.headlineHidden
    })}"
          >
            <div class="content">
              ${this.headline ? u` <maui-headline
                    class="${y({
      "sr-only": this.headlineHidden && !this.small
    })}"
                    .theme=${this.theme}
                    .type=${this.headlineType}
                    format="h4"
                    weight="bold"
                  >
                    <span class="headline">${this.headline}</span>
                  </maui-headline>` : ""}
              ${this.small ? E : u`<slot @slotchange=${this.handleSlotChange}></slot>`}
              ${this.small ? E : u`<div
                    class="actions"
                    ?hidden=${!(i || r)}
                  >
                    ${r ? u`<slot
                          hidden
                          name="cta"
                          @slotchange=${this.handleSlotChange}
                        ></slot>` : ""}
                    ${i ? u`<slot
                          hidden
                          name="action"
                          @slotchange=${this.handleSlotChange}
                        ></slot>` : ""}
                  </div>`}
            </div>
          </div>
          ${t ? u`<div class="close">
                <maui-icon-link
                  .theme=${this.theme}
                  .size=${"large"}
                  .variant=${"close"}
                  .ariaLabel=${this.assistiveDismiss}
                  @click=${(n) => {
      n.preventDefault(), this.dismiss();
    }}
                >
                </maui-icon-link>
              </div> ` : ""}
        </div>
      </div>
    `;
  }
}
ze.styles = ky;
je([
  M(".notification")
], ze.prototype, "notification", 2);
je([
  M(".notification-content")
], ze.prototype, "content", 2);
je([
  O()
], ze.prototype, "_visible", 2);
je([
  l({ reflect: !0 })
], ze.prototype, "type", 2);
je([
  l({ reflect: !0, type: Boolean })
], ze.prototype, "inline", 2);
je([
  l({ reflect: !0, type: Boolean })
], ze.prototype, "dismissable", 2);
je([
  l({ type: Boolean })
], ze.prototype, "headlineHidden", 2);
je([
  l({ type: Boolean })
], ze.prototype, "small", 2);
je([
  l({ reflect: !0 })
], ze.prototype, "headline", 2);
je([
  l({ type: String })
], ze.prototype, "assistiveDismiss", 2);
je([
  l({ reflect: !0 })
], ze.prototype, "headlineType", 2);
xo("notification.dismiss", {
  keyframes: [
    { transformOrigin: "center -20px", transform: "scaleY(1)", opacity: "1" },
    { transformOrigin: "center -20px", transform: "scaleY(0)", opacity: "0" }
  ],
  options: {
    duration: 300,
    easing: "cubic-bezier(0.65, 0.1, 0.4, 1)",
    fill: "forwards"
  }
});
xo("notification.contentFade", {
  keyframes: [{ opacity: "1" }, { opacity: "0" }],
  options: { duration: 300, easing: "ease", fill: "forwards" }
});
w("maui-notification", ze);
const Rs = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-focus-radius: 6px;
      --maui-icon-color-override: var(--maui-color-brand-whale-blue);
    }

    .${e}.item {
      border-radius: 4px;

      ${d({ size: "copy-large", tenant: a })};
    }

    .${e}.item:not(.selected):not(.overflow):not(:has(span.icon)):hover {
      background-color: var(--maui-color-brand-marble-blue);
    }

    .${e}.item:not(.selected):not(.overflow):disabled:hover {
      background: transparent;
    }

    .${e}.item:not(.selected):not(.overflow):has(span.icon):hover {
      background-color: transparent;
    }

    .${e}.item:has(span.icon):hover {
      --maui-icon-color-override: var(--maui-color-brand-marble-blue);
    }

    .${e}.item:disabled:has(span.icon) {
      --maui-icon-color-override: var(--maui-color-grey-04);
    }
  `;
}, My = s`
  ${C}

  ${H("item:not(.overflow)")}

  :host {
    --border-transparent: 1px solid transparent;
  }

  .item {
    --maui-focus-radius: 0px;
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
    --maui-focus-outline-offset: 4px;

    position: relative;
    display: grid;
    place-content: center;
    width: 50px;
    height: 50px;
    border: var(--border-transparent);

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

    font-family: var(--maui-font-family-copy);
    background-color: var(--maui-color-grey-01);
    color: var(--maui-color-text-copy);

    transition: color 0.2s, background 0.3s;

    cursor: pointer;
  }

  .item:disabled {
    cursor: not-allowed;
  }
  .item.overflow {
    cursor: initial;
  }

  .item:disabled {
    --maui-icon-color-override: var(--maui-color-disabled-background-inverted);
    background: transparent;
  }

  .item.selected {
    background-color: var(--maui-color-brand-primary);
    color: var(--maui-color-brand-white);
  }

  /* Three dots */
  .item.overflow {
    background-color: transparent;
    user-select: none;
  }

  /* Styles for default button on hover */
  .item:not(.selected):not(.overflow):hover {
    color: var(--maui-color-brand-white);
    background-color: var(--maui-color-brand-black);
  }

  .item:has(span.icon) {
    background-color: transparent;
    transition: all 0.2s ease 0s;
  }

  /* Change in colors for smaller screens as buttons are changed to one line of text TODO mobile first */
  :host(.mobile) .item {
    background-color: transparent;
    /* Should probably not use --maui-color-brand-whale-blue, to discuss */
    color: var(--maui-color-brand-whale-blue);
  }

  .item:not(.selected):disabled,
  .item:not(.selected):disabled:hover {
    background: initial;
    color: initial;
  }
`, Ly = s`
  ${Rs("lh")}
`, By = s`
  .lx {
    --maui-focus-radius: 2px;
    --border-transparent: 1px solid transparent;
  }

  .lx.item {
    --maui-icon-color-override: var(--maui-color-brand-warm-grey);
    background-color: var(--maui-color-brand-white);
    border: 1px solid var(--maui-color-grey-01);
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .lx.item:has(span.icon) {
    background-color: var(--maui-color-brand-white);
  }

  .lx.item.selected {
    background-color: var(--maui-color-brand-lx-red);
  }

  .lx.item:not(.selected):not(.overflow):not(:disabled):has(
      span.icon
    ):focus:hover {
    --maui-icon-color-override: var(--maui-color-brand-white);
    background-color: var(--maui-color-brand-pine-grey);
  }

  .lx.item:not(.selected):not(.overflow):hover {
    --maui-icon-color-override: var(--maui-color-brand-white);

    background-color: var(--maui-color-brand-pine-grey);
    color: var(--maui-color-brand-white);
    border: var(--border-transparent);
  }

  .lx.item:not(.selected):not(.overflow):has(span.icon):focus {
    --maui-icon-color-override: var(--maui-color-brand-warm-grey);
    background-color: transparent;
  }

  .lx.item.selected,
  .lx.item:disabled:has(span.icon),
  .lx.item.overflow {
    border: var(--border-transparent);
  }

  .lx.item:has(span.icon):disabled {
    --maui-icon-color-override: var(--maui-color-grey-02);
  }

  .lx.item:has(span.icon):disabled,
  .lx.item:has(span.icon):disabled:hover {
    --maui-icon-color-override: var(--maui-color-grey-02);
    background-color: var(--maui-color-brand-white);
  }

  .lx.item:disabled:hover {
    background-color: var(--maui-color-brand-pine-grey);
  }

  .lx.item.overflow,
  .lx.item.overflow:hover {
    color: var(--maui-color-brand-warm-grey);
    background-color: transparent;
  }
`, Cy = s`
  .os {
    --maui-focus-radius: 0px;
    --maui-icon-color-override: var(--maui-color-brand-black);
    --border-transparent: 1px solid transparent;
  }

  .os.item {
    border-radius: 4px;
    background-color: var(--maui-color-brand-white);
    border: 1px solid var(--maui-color-grey-03, #dee2e7);
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .os.item.selected {
    background-color: var(--maui-color-brand-os-red);
    border: var(--border-transparent);
  }

  .os.item:has(span.icon),
  .os.item.overflow {
    border: var(--border-transparent);
  }

  .os.item:not(.selected):not(.overflow):hover {
    background-color: var(--maui-color-brand-milano-red);
    border: var(--border-transparent);
  }

  .os.item:not(.selected):not(.overflow):hover:focus {
    background-color: var(--maui-color-brand-os-red);
  }

  .os.item:not(.selected):not(.overflow):has(span.icon):hover {
    background-color: transparent;
    border: var(--border-transparent);
  }

  .os.item:not(:disabled):has(span.icon):focus {
    border: var(--border-transparent);
  }

  .os.item:not(:disabled):has(span.icon):hover {
    --maui-icon-color-override: var(--maui-color-brand-milano-red);
    background-color: transparent;
    border: var(--border-transparent);
  }

  .os.item:disabled:has(span.icon) {
    --maui-icon-color-override: var(--maui-color-brand-grey-04-transparent-1);
    background-color: transparent;
    border: var(--border-transparent);
  }
`, zy = s`
  .sn {
    --maui-focus-radius: 100px;
    --maui-icon-color-override: var(--maui-color-brand-sn-red-2);
  }

  .sn.item {
    border-radius: 34px;
    background: var(--maui-color-brand-white);
    color: var(--maui-color-brand-sn-red-2);
    ${d({ size: "copy-medium", tenant: "sn" })};
  }

  .sn.item.selected {
    background: var(--maui-color-brand-sn-blue-3);
    color: var(--maui-color-brand-white);
  }

  .sn.item:disabled {
    color: var(--maui-color-grey-08);
  }
  /* This applies to arrows */
  .sn.item:disabled:not(.overflow) {
    --maui-icon-color-override: var(--maui-color-grey-05);
  }

  .sn.item:not(.selected):not(.overflow):not(:has(span.icon)):hover {
    color: var(--maui-color-brand-white);
    background-color: var(--maui-color-brand-sn-blue-4);
  }

  .sn.item:not(.selected):not(.overflow):not(:disabled):has(span.icon):hover {
    --maui-icon-color-override: var(--maui-color-brand-white);
    background-color: var(--maui-color-brand-sn-blue-4);
  }
`, Ay = s`
  ${Rs("b2b")}

  .b2b {
    --maui-focus-radius: 6px;
    --maui-icon-color-override: var(--maui-color-grey-08);
  }
`, Fy = s`
  .four_y {
    --maui-focus-radius: 100px;
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y.item {
    border-radius: 34px;
    background: var(--maui-color-brand-white);
    color: var(--maui-color-interaction-buttonsecondary);
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }

  .four_y.item.selected {
    background: var(--maui-color-interaction-buttonsecondary);
    color: var(--maui-color-brand-white);
  }

  .four_y.item:disabled.overflow {
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y.item:disabled {
    color: var(--maui-color-disabled-background);
  }
  /* This applies to arrows */
  .four_y.item:disabled:not(.overflow) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .four_y.item:not(.overflow, :has(span.icon), [disabled]):hover {
    outline: 2px solid var(--maui-color-interaction-buttonsecondaryhover);
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
    outline-offset: -1px;
    color: var(--maui-color-brand-white);
  }

  .four_y.item:not(.selected):not(.overflow):not(:disabled):has(
      span.icon
    ):hover {
    --maui-icon-color-override: var(--maui-color-brand-white);
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
  }
`, Ny = s`
  .mmg {
    --maui-focus-radius: var(--maui-radii-default-radius);
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .mmg.item {
    border-radius: var(--maui-radii-default-radius);
    border-color: var(--maui-color-interaction-interaction);
    background: var(--maui-color-brand-white);
    color: var(--maui-color-interaction-interaction);
    ${d({ size: "copy-large", tenant: "mmg" })};
  }

  .mmg.item.selected,
  .mmg.item:hover {
    background: var(--maui-color-interaction-interactionhover);
    color: var(--maui-color-brand-white);
    border-color: var(--maui-color-interaction-interactionhover);
  }

  .mmg.item:disabled.overflow {
    color: var(--maui-color-interaction-interactionhover);
  }

  .mmg.item:disabled {
    color: var(--maui-color-disabled-background);
  }
  /* This applies to arrows */
  .mmg.item:has(span.icon) {
    border-color: transparent;
  }

  .mmg.item:disabled:not(.overflow) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .mmg.item:not(.overflow, :has(span.icon), [disabled]):hover {
    outline: 2px solid var(--maui-color-interaction-interactionhover);
    background-color: var(--maui-color-interaction-interactionhover);
    outline-offset: -1px;
    color: var(--maui-color-brand-white);
  }

  .mmg.item:not(.selected):not(.overflow):not(:disabled):has(span.icon):hover {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
    background-color: transparent;
  }
`, Iy = [
  Cy,
  Ay,
  zy,
  Ly,
  By,
  My,
  Fy,
  Ny
];
var Uy = Object.defineProperty, Ry = Object.getOwnPropertyDescriptor, Yt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Ry(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 && Uy(e, t, i), i;
};
class dt extends k {
  constructor() {
    super(...arguments), this.overflow = !1;
  }
  /** Simulates a click on the item. */
  click() {
    this.item?.click();
  }
  /** Sets focus on the item. */
  focus(e) {
    this.focused && this.item?.focus(e);
  }
  /** Removes focus from the item. */
  blur() {
    this.item?.blur();
  }
  handleClick(e) {
    this.disabled && (e.preventDefault(), e.stopPropagation()), this.emit("maui-page-change", {
      detail: { nextPage: this.pageNumber, switchFocus: !!this.icon }
    });
  }
  update(e) {
    e.has("pageNumber") && this.focused && this.focus(), super.update(e);
  }
  render() {
    const { selected: e, overflow: t, icon: o, disabled: i, pageNumber: r } = this;
    return u`<button
      @click=${this.handleClick}
      ?disabled=${i || !!t}
      aria-label=${U(this.label || void 0)}
      class="${y({
      [this.theme]: !0,
      item: !0,
      selected: e,
      overflow: !!t
    })}"
      tabindex=${U(t || e ? -1 : void 0)}
    >
      ${o ? u`<span class="icon" aria-hidden="true">
            <slot name="icon">
              <maui-icon .use=${o} .theme=${this.theme}></maui-icon>
            </slot>
          </span>` : u`<span aria-hidden="true">${r}</span>`}
    </button>`;
  }
}
dt.styles = Iy;
Yt([
  l({ type: String })
], dt.prototype, "pageNumber", 2);
Yt([
  l({ type: String })
], dt.prototype, "label", 2);
Yt([
  l({ type: Boolean })
], dt.prototype, "selected", 2);
Yt([
  l({ type: Boolean })
], dt.prototype, "focused", 2);
Yt([
  l({ type: String })
], dt.prototype, "icon", 2);
Yt([
  l({ type: Boolean })
], dt.prototype, "overflow", 2);
Yt([
  l({ type: Boolean, reflect: !0 })
], dt.prototype, "disabled", 2);
Yt([
  M(".item")
], dt.prototype, "item", 2);
w("maui-pagination-item", dt);
const Dy = s`
  ${C}

  .pagination {
    display: flex;
    gap: var(--maui-spacing-3);
    justify-content: center;
    container-type: inline-size;
  }

  .mobile-item {
    display: flex;
    width: -webkit-fill-available;
    height: var(--maui-spacing-7);
    padding: var(--maui-spacing-3) 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--maui-spacing-3);
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
    ${d({ size: "copy-small", tenant: "wl" })};
    font-weight: var(--maui-font-weight-bold);
    font-style: normal;
    text-align: center;
  }

  .mobile {
    display: flex;
  }

  .desktop {
    display: none;
  }

  @container (min-width: 650px) {
    .mobile {
      display: none;
    }
    .desktop {
      display: flex;
    }
  }
`, Ey = s`
  .lh .mobile-item {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, Py = s`
  .os .mobile-item {
    ${d({ size: "copy-medium", tenant: "os" })};
    font-weight: var(--maui-font-weight-regular);
    height: var(--maui-spacing-6);
  }
`, Hy = s`
  .sn .mobile-item {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, Gy = s`
  .lx .mobile-item {
    ${p({ size: "forms-medium", tenant: "lx" })};
    font-weight: var(--maui-font-weight-regular);
  }
`, Yy = s`
  .b2b .mobile-item {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }
`, Ty = s`
  .four_y .mobile-item {
    ${d({ size: "copy-medium", tenant: "four_y" })};
    border-radius: var(--maui-radii-pill-radius);
    height: 50px;
    color: var(--maui-color-interaction-buttonsecondary);
  }
`, Xy = s`
  .mmg.pagination {
    align-items: center;
    gap: var(--maui-spacing-2);
  }

  .mmg .mobile-item {
    ${d({ size: "copy-large", tenant: "mmg" })};
  }
`, Vy = [
  Py,
  Yy,
  Hy,
  Ey,
  Gy,
  Dy,
  Ty,
  Xy
];
var jy = Object.defineProperty, qy = Object.getOwnPropertyDescriptor, Xo = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? qy(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 && jy(e, t, i), i;
};
const Tt = class er extends k {
  constructor() {
    super(), this.currentPage = 1, this.labelCallback = er.labelFallback, this.componentName = "pagination";
  }
  changeCurrentPage(e) {
    this.currentPage = e;
  }
  goToFirstPage() {
    this.changeCurrentPage(1);
  }
  goToLastPage() {
    this.changeCurrentPage(this.totalPages);
  }
  /** Checks if the user can go one page back and if yes - does so */
  handlePrevPage() {
    this.currentPage !== 1 && this.changeCurrentPage(this.currentPage - 1);
  }
  /** Checks for the existence of next page and if it's possible changed currently selected one to next */
  handleNextPage() {
    this.currentPage >= this.totalPages || this.changeCurrentPage(this.currentPage + 1);
  }
  // Validates the selected page if not out of boundaries
  /** Changes currently selected page to a specific one if it exists in range of totalPages */
  handlePageChange(e) {
    const { nextPage: t } = e.detail;
    if (this.currentPage === t || typeof t == "string") {
      this.forcefullyFocusedPage = -1;
      return;
    }
    this.forcefullyFocusedPage = t, this.changeCurrentPage(t);
  }
  firstButton(e) {
    return u`<maui-pagination-item
      .theme="${this.theme}"
      icon="icon-pager-first"
      class="mobile"
      .disabled="${e}"
      label=${this.labelCallback(1, "first")}
      @click=${this.goToFirstPage}
    >
    </maui-pagination-item>`;
  }
  prevButton(e, t) {
    return u`<maui-pagination-item
      .theme="${this.theme}"
      icon="icon-pager-prev"
      .disabled="${e}"
      class=${t}
      label=${this.labelCallback(Math.max(1, this.currentPage - 1), "previous")}
      @click=${this.handlePrevPage}
    >
    </maui-pagination-item>`;
  }
  nextButton(e, t) {
    return u`
      <maui-pagination-item
        .theme="${this.theme}"
        .disabled="${e}"
        icon="icon-pager-next"
        class=${t}
        label=${this.labelCallback(
      Math.min(this.currentPage + 1, this.totalPages),
      "next"
    )}
        @click=${this.handleNextPage}
      ></maui-pagination-item>
    `;
  }
  lastButton(e) {
    return u`<maui-pagination-item
      .theme="${this.theme}"
      icon="icon-pager-last"
      class="mobile"
      .disabled="${e}"
      label=${this.labelCallback(this.totalPages, "last")}
      @click=${this.goToLastPage}
    ></maui-pagination-item>`;
  }
  /** Method to create pagination for provided total amount of pages */
  static paginationGenerator(e, t) {
    if (t < 9)
      return Array.from({ length: t }, (i, r) => r + 1);
    const o = "...";
    return e < 5 ? [1, 2, 3, 4, 5, 6, 7, o, t] : e > t - 5 ? [
      1,
      o,
      t - 6,
      t - 5,
      t - 4,
      t - 3,
      t - 2,
      t - 1,
      t
    ] : [
      1,
      o,
      e - 2,
      e - 1,
      e,
      e + 1,
      e + 2,
      o,
      t
    ];
  }
  static labelFallback(e, t) {
    if (e === "...")
      return "there are further pages available";
    switch (t) {
      case "first":
        return "go to first page";
      case "previous":
        return "go to previous page";
      case "current":
        return `current page (${e})`;
      case "current-mobile":
        return `Page ${e}`;
      case "next":
        return "go to next page";
      case "last":
        return "go to last page";
      default:
        return `go to page ${e}`;
    }
  }
  updated(e) {
    if (e.has("totalPages") && this.totalPages < this.currentPage) {
      const o = {
        detail: { nextPage: this.totalPages, switchFocus: !0 }
      };
      this.handlePageChange(o);
      return;
    }
    if (e.has("totalPages") && this.totalPages < 1) {
      const o = {
        detail: { nextPage: this.totalPages, switchFocus: !0 }
      };
      this.handlePageChange(o);
    }
    if (e.has("currentPage") && (this.currentPage < 1 || this.currentPage > this.totalPages)) {
      const o = {
        detail: { nextPage: 1, switchFocus: !0 }
      };
      this.handlePageChange(o);
    }
  }
  handleCurrentPageChange() {
    this.emit("maui-change", {
      detail: {
        currentPage: this.currentPage
      }
    });
  }
  render() {
    const { totalPages: e, currentPage: t, forcefullyFocusedPage: o } = this, i = t === 1, r = t === e, n = (c) => {
      const m = parseInt(`${c}`, 10), g = c === "...", f = m === t;
      return u`
        <maui-pagination-item
          .selected="${f}"
          .overflow="${g}"
          ?focused="${o >= 0 && o === m}"
          .theme=${this.theme}
          class=${y({
        desktop: !0,
        [this.theme]: !0
      })}
          aria-current=${U(f ? "page" : void 0)}
          label=${f ? this.labelCallback(c, "current") : this.labelCallback(c, "other")}
          @maui-page-change="${this.handlePageChange}"
          .pageNumber=${c}
        >
        </maui-pagination-item>
      `;
    };
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      ${this.firstButton(i)}
      ${this.prevButton(i, "mobile")}
      ${this.prevButton(i, "desktop")}
      ${er.paginationGenerator(t, e).map(
      n
    )}
      <span class="mobile-item mobile" aria-hidden="true"
        >${this.labelCallback(this.currentPage, "current-mobile")}</span
      >
      <span class="sr-only"
        >${this.labelCallback(this.currentPage, "current")}</span
      >
      ${this.nextButton(r, "mobile")}
      ${this.nextButton(r, "desktop")}
      ${this.lastButton(r)}
    </div>`;
  }
};
Tt.styles = Vy;
Xo([
  M("maui-pagination")
], Tt.prototype, "pagination", 2);
Xo([
  l({ reflect: !0, type: Number })
], Tt.prototype, "totalPages", 2);
Xo([
  l({ reflect: !0, type: Number })
], Tt.prototype, "currentPage", 2);
Xo([
  l()
], Tt.prototype, "labelCallback", 2);
Xo([
  O()
], Tt.prototype, "forcefullyFocusedPage", 2);
Xo([
  F("currentPage", { waitUntilFirstUpdate: !0 })
], Tt.prototype, "handleCurrentPageChange", 1);
let Ky = Tt;
w("maui-pagination", Ky);
const Ds = class Wi {
  constructor(e, t) {
    (this.host = e).addController(this), this.minWidth = t, this.matchesQuery = Wi.mediaQueryList[this.minWidth].matches;
  }
  hostConnected() {
    Wi.mediaQueryList[this.minWidth].addEventListener(
      "change",
      this.updateMediaQuery.bind(this)
    );
  }
  hostDisconnected() {
    Wi.mediaQueryList[this.minWidth].removeEventListener(
      "change",
      this.updateMediaQuery.bind(this)
    );
  }
  updateMediaQuery(e) {
    this.matchesQuery = e.matches, this.host.requestUpdate();
  }
};
Ds.mediaQueryList = Object.keys(S).reduce(
  (a, e) => S[e]["min-width"] ? {
    ...a,
    [e]: matchMedia(
      `screen and (min-width: ${S[e]["min-width"]}px)`
    )
  } : a,
  {}
);
let Es = Ds;
const Wy = s`
  ${C}

  button {
    align-items: center;
    font-family: var(--maui-font-family-copy);
  }

  .step-indicator {
    margin: var(--step-indicator-margin);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    color: var(--maui-collapsible-color-header);
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
    --maui-icon-size-override: 18px;
  }

  .step-indicator-box {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .step-indicator:not([disabled]):focus::after {
    --maui-focus-radius: var(--maui-collapsible-focus-radius);
    --maui-focus-outline-offset-y: var(
      --maui-collapsible-focus-outline-offset-y
    );
  }

  .step-indicator:hover .header-text {
    text-decoration: var(--maui-collapsible-text-decoration-hover, underline);
  }

  .collapsed .step-indicator {
    color: var(
      --maui-collapsible-color-header-collapsed,
      var(--maui-collapsible-color-header)
    );
  }

  .collapsed .step-indicator:hover {
    color: var(
      --maui-collapsible-hover-color-header-collapsed,
      var(--maui-collapsible-hover-color-header)
    );
  }

  .icon-expand {
    margin-top: calc(
      (var(--maui-line-height-3) - var(--maui-collapsible-icon-size-override)) /
        2
    );
    /* LH: (lineheight 24 - iconheight 17) / 2 - due to multi-line */
    margin-left: var(--maui-spacing-3);
    transition: transform 0.3s linear;
  }

  ${H("step-indicator")}

  :host {
    position: relative;
    display: block;
    z-index: 1;
  }

  .expandable-pane {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
  }

  .collapsibleitem {
    background-color: white;
  }

  .expandable-pane,
  .expandable-pane.collapsed,
  .expandable-pane.hidden {
    overflow: hidden;
    transition: 0.3s ease;
  }

  :host,
  .expandable-pane.hidden,
  .expandable-pane.collapsed {
    height: calc(
      var(--expandable-pane-height) + var(--expandable-extra-pane-height)
    );
  }
`, Ps = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-collapsible-focus-outline-offset-y: 0px; /* can be inlined after alignment - all 0 */
      --maui-collapsible-focus-radius: 6px;
      --step-indicator-margin: 12px 12px 0 0;
      --expandable-extra-pane-height: 0px;
    }

    .${e}.expandable-pane.expanding, .${e}.expandable-pane.expanded {
      background-color: var(--maui-color-grey-01);
    }
  `;
}, Zy = s`
  ${Ps("lh")}
`, Qy = s`
  ${Ps("b2b")}
`, Jy = s`
  .os {
    --step-indicator-margin: var(--maui-spacing-3) var(--maui-spacing-3) 0 0;
  }
`, e2 = s`
  .sn {
    --step-indicator-margin: 14px 9px 0 0;
  }
`, t2 = s`
  .lx {
    --step-indicator-margin: 19px 14px 0 0;
  }
`, o2 = s`
  .four_y {
    --step-indicator-margin: var(--maui-spacing-3) var(--maui-spacing-3) 0 0;
  }
`, i2 = s`
  .mmg {
    --step-indicator-margin: var(--maui-spacing-3) var(--maui-spacing-3) 0 0;
  }
`, a2 = [
  Wy,
  Zy,
  Qy,
  Jy,
  e2,
  t2,
  o2,
  i2
];
var r2 = Object.defineProperty, n2 = Object.getOwnPropertyDescriptor, Xt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? n2(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 && r2(e, t, i), i;
};
class ut extends k {
  constructor() {
    super(), this.currentStep = 0, this.collapsedState = "hidden", this.sectionHeight = 0, this.debouncedUpdatePaneHeight = wn(() => {
      this.showActiveStep(), this.sectionHeight = this.expandablePane.scrollHeight;
    }, 300), this.bindDebouncedUpdatePaneHeight = this.debouncedUpdatePaneHeight.bind(this), this.scrolling = !1, this.showActiveStep = () => {
      let e, t;
      const o = this.getStepListContainer();
      if (o.querySelectorAll(".step-button").forEach((r) => {
        r instanceof HTMLElement && (e || (e = r.getBoundingClientRect().top), r.classList.contains("step-active") ? t = r.getBoundingClientRect().top : r.setAttribute("aria-hidden", "true"));
      }), e && t) {
        const r = e - t;
        o.style.transition = "transform 0.3s ease", o.style.transform = `translateY(${r}px)`;
      }
      this.updatePaneHeight();
    }, this.componentName = "collapsibleitem";
  }
  connectedCallback() {
    super.connectedCallback(), this.expanded && (this.collapsedState = "expanded"), window.addEventListener("resize", this.bindDebouncedUpdatePaneHeight);
  }
  disconnectedCallback() {
    window.removeEventListener("resize", this.bindDebouncedUpdatePaneHeight);
  }
  updated(e) {
    super.updated(e), this.expandablePane.scrollHeight > this.sectionHeight && (this.sectionHeight = this.expandablePane.scrollHeight), e.has("expanded") && this.handleExpandedChange(), e.has("currentStep") && this.collapsedState === "hidden" && setTimeout(() => {
      this.showActiveStep();
    }, 100);
  }
  updatePaneHeight() {
    this.style.setProperty(
      "--expandable-pane-height",
      `${this.getActiveStepHeight()}px`
    ), this.expandablePane.style.removeProperty("height");
  }
  handleExpandedChange() {
    (this.expanded && (this.collapsedState === "collapsed" || this.collapsedState === "hidden") || !this.expanded && this.collapsedState === "expanded") && this.toggleCollapsedState();
  }
  toggleCollapsedState() {
    this.collapsedState === "collapsed" || this.collapsedState === "hidden" ? this.expandSection() : this.collapseSection();
  }
  getStepListContainer() {
    return Array.from(
      this.shadowRoot.querySelector("slot").assignedNodes()
    ).find(
      (e) => e instanceof HTMLElement && e.getAttribute("slot") === "step-list"
    );
  }
  collapseSection() {
    this.showActiveStep(), requestAnimationFrame(() => {
      this.expandablePane.style.height = `${this.sectionHeight}px`, this.emit("maui-collapse"), requestAnimationFrame(() => {
        this.expandablePane.style.height = `${this.getActiveStepHeight()}px`, this.collapsedState = "collapsed";
        const e = () => {
          this.expandablePane.removeEventListener(
            "transitionend",
            e
          ), this.collapsedState = "hidden", this.emit("maui-after-collapse");
        };
        this.expandablePane.addEventListener(
          "transitionend",
          e
        );
      });
    });
  }
  getActiveStepHeight() {
    return this.getStepListContainer().querySelectorAll(".step-active")[0].parentElement.offsetHeight;
  }
  expandSection() {
    this.collapsedState = "collapsed";
    const e = this.getStepListContainer();
    e.style.transition = "transform 0.3s ease", e.style.transform = "translateY(0)", e.querySelectorAll(".step-button").forEach((o) => {
      o instanceof HTMLElement && o.setAttribute("aria-hidden", "false");
    }), requestAnimationFrame(() => {
      this.expandablePane.style.height = `${this.sectionHeight}px`, this.collapsedState = "expanding", this.emit("maui-expand"), this.scrolling && this.scrollIntoView({ behavior: "smooth" });
      const o = () => {
        this.expandablePane.removeEventListener(
          "transitionend",
          o
        ), this.expandablePane.style.removeProperty("height"), this.collapsedState = "expanded", this.emit("maui-after-expand");
      };
      this.expandablePane.addEventListener(
        "transitionend",
        o
      );
    });
  }
  render() {
    const e = this.collapsedState === "collapsed" || this.collapsedState === "hidden";
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      collapsed: e,
      hidden: this.collapsedState === "hidden",
      expanded: this.collapsedState === "expanded",
      expanding: this.collapsedState === "expanding",
      "expandable-pane": !0
    })}
    >
      <slot name="step-list"></slot>
      <div class="step-indicator">
        <maui-functional-link
          variant=${e ? "expand" : "collapse"}
          .theme=${this.theme}
          @click=${this.toggleCollapsedState}
          id=${`${this.id}-toggle`}
          aria-controls=${`${this.id}-section`}
          aria-expanded=${!e}
        >
          <slot name="step-info"></slot>
        </maui-functional-link>
      </div>
    </div> `;
  }
}
ut.styles = a2;
Xt([
  l({ type: Number })
], ut.prototype, "currentStep", 2);
Xt([
  O()
], ut.prototype, "collapsedState", 2);
Xt([
  O()
], ut.prototype, "sectionHeight", 2);
Xt([
  M(".expandable-pane")
], ut.prototype, "expandablePane", 2);
Xt([
  l({ type: String })
], ut.prototype, "headline", 2);
Xt([
  l({ type: String })
], ut.prototype, "type", 2);
Xt([
  l({ type: Boolean })
], ut.prototype, "expanded", 2);
Xt([
  l({ type: Boolean })
], ut.prototype, "scrolling", 2);
w(
  "maui-progress-collapsible-item",
  ut
);
const s2 = s`
  @keyframes widthAnimation2 {
    0% {
      animation-timing-function: linear;
      transform: scaleX(0.1);
    }
    20% {
      animation-timing-function: linear;
      transform: scaleX(0.6);
    }
    45% {
      animation-timing-function: linear;
      transform: scaleX(0.9);
    }
    100% {
      transform: scaleX(0.1);
    }
  }

  @keyframes offsetAnimation2 {
    0% {
      left: -55%;
      animation-timing-function: linear;
    }
    25% {
      left: -15%;
      animation-timing-function: linear;
    }
    50% {
      left: 30%;
      animation-timing-function: linear;
    }
    100% {
      left: 120%;
    }
  }

  .progressbar {
    position: relative;
    width: 100%;
    background-color: var(
      --maui-progressbar-background,
      var(--maui-color-grey-03)
    );

    overflow: hidden;
  }

  .small {
    height: var(--maui-progressbar-height-small, 2px);
  }

  .medium {
    height: var(--maui-progressbar-height-medium, 5px);
  }

  .fill,
  .fill2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(
      --maui-progressbar-fill-color,
      var(--maui-color-brand-primary)
    );
    transition: width 0.3s ease-in-out;
  }

  .indeterminate .fill,
  .indeterminate .fill2 {
    transition: transform 0.2s linear;
    width: 100%;
  }

  .indeterminate .fill {
    animation: widthAnimation2 2.5s infinite, offsetAnimation2 2.5s infinite;
  }

  .indeterminate .fill2 {
    transform: scaleX(0);
    animation: widthAnimation2 2.5s -3.75s infinite,
      offsetAnimation2 2.5s -3.75s infinite;
  }
`, l2 = s`
  .lh {
    --maui-progressbar-fill-color: var(--maui-color-brand-secondary);
  }
`, c2 = s`
  .lx {
    --maui-progressbar-background: var(--maui-color-grey-02);
  }
`, d2 = s`
  .sn {
    --maui-progressbar-background: var(--maui-color-grey-04);
  }
`, u2 = s`
  .b2b {
    --maui-progressbar-fill-color: var(--maui-color-brand-secondary);
  }
`, m2 = s`
  .four_y {
    --maui-progressbar-background: var(--maui-color-grey-04);
    --maui-progressbar-fill-color: var(--maui-color-interaction-buttonprimary);
  }
`, h2 = s`
  .mmg {
    --maui-progressbar-fill-color: var(--maui-color-interaction-interaction);
  }
`, p2 = [s2, l2, c2, d2, u2, m2, h2];
var g2 = Object.defineProperty, b2 = Object.getOwnPropertyDescriptor, zr = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? b2(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 && g2(e, t, i), i;
};
class Ni extends k {
  constructor() {
    super(), this.size = "medium", this.completion = 0, this.indeterminate = !1, this.componentName = "progressbar";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-live", "polite"), this.setAttribute("aria-relevant", "additions"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), !this.ariaLabel && !this.getAttribute("aria-labelledby") && this.setAttribute("aria-label", "Loading");
  }
  updated(e) {
    super.updated(e);
    const t = this.completion && !this.indeterminate ? this.completion : void 0;
    t ? this.setAttribute("aria-valuenow", `${t}`) : this.removeAttribute("aria-valuenow"), this.indeterminate ? (this.setAttribute("aria-valuetext", "loading"), this.setAttribute("aria-busy", "true")) : (this.removeAttribute("aria-valuetext"), this.removeAttribute("aria-busy"));
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      indeterminate: this.indeterminate,
      [this.size]: !0
    })}
    >
      <div
        class="fill"
        style=${At(
      this.indeterminate ? {} : { width: `${this.completion}%` }
    )}
      ></div>
      ${this.indeterminate ? u` <div class="fill2"></div>` : ""}
    </div>`;
  }
}
Ni.styles = p2;
zr([
  l({ type: String })
], Ni.prototype, "size", 2);
zr([
  l({ type: Number })
], Ni.prototype, "completion", 2);
zr([
  l({ type: Boolean })
], Ni.prototype, "indeterminate", 2);
w("maui-progressbar", Ni);
const v2 = s`
  ${C}

  .progressindicator {
    font-family: var(--maui-font-family-copy);
  }

  .step-button {
    background: none;
    color: inherit;
    border: none;
    font: inherit;
    cursor: pointer;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--step-button-padding);
    border: 1px solid transparent;
    outline: none;
  }

  .step-button:disabled {
    cursor: not-allowed;
  }

  .step-list {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin: var(--step-list-margin);
    font-family: var(--maui-font-family-copy);
  }

  .step-circle {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    align-self: flex-start;
  }

  .step-button-box {
    padding: var(--step-button-box-padding);
  }

  .step-progress {
    color: var(--maui-color-interaction-interaction);
    white-space: nowrap;
  }

  .step {
    display: flex;
    text-align: left;
    align-items: flex-end;
  }

  .column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: var(--column-margin);
  }

  @media (max-width: ${S.mobile["max-width"]}px) {
    .step-label {
      word-break: break-all;
    }
  }
`, Hs = (a) => {
  const e = h(a), t = h(
    a === "b2b" ? "var(--maui-color-brand-primary)" : "var(--maui-color-brand-secondary)"
  ), o = h(
    a === "b2b" ? "var(--maui-color-text-copy-inverted)" : "var(--maui-color-text-copy)"
  );
  return s`
    .${e} {
      --step-button-padding: 6px 8px;
      --step-list-margin: 3px 1px -5px;
      --column-margin: 3px 14px 7px 6px;
      --step-button-box-padding: 0 0 6px 0;
      --expandable-extra-pane-height: 0px;
    }
    /* Label */
    .${e} .step-circle {
      background: ${t};
      color: var(--maui-color-brand-white);
      ${d({ size: "copy-small", tenant: a, omitLineHeight: !0 })};
    }

    .${e} .step-list {
      font-weight: var(--maui-font-weight-regular);
      ${d({ size: "copy-medium", tenant: a })};
    }

    .${e} .step-active {
      font-weight: var(--maui-font-weight-bold);
      color: var(--maui-color-text-copy);
    }

    .${e} .step-active .step-circle {
      color: ${o};
    }

    .${e} .step-done .step-circle {
      background-color: var(--maui-color-grey-07);
      --maui-icon-color-override: var(--maui-color-brand-white);
    }

    .${e} .step-upcoming .step-circle {
      background-color: var(--maui-color-grey-05);
    }

    .${e} .step-upcoming {
      color: var(--maui-color-grey-05);
    }

    .${e} .step-progress {
      font-weight: var(--maui-font-weight-bold);
      ${d({ size: "copy-medium", tenant: a })};
    }

    .${e} .step-done {
      color: var(--maui-color-text-caption);
    }

    .${e} .step-done:hover {
      color: var(--maui-color-interaction-interactionhover);
    }

    .${e} .step-done:hover .step-circle {
      background-color: var(--maui-color-interaction-interactionhover);
    }

    .${e} .step-button:focus {
      box-shadow: 0px 0px 6px 1px var(--maui-color-interaction-interaction);
      border-radius: 6px;
    }
  `;
}, f2 = s`
  ${Hs("lh")}
`, y2 = s`
  ${Hs("b2b")}
`, x2 = s`
  .os {
    --step-button-padding: 5px;
    --step-list-margin: 5px;
    --column-margin: 5px;
    --step-button-box-padding: 0 0 12px 0;
    --expandable-extra-pane-height: 0px;
  }

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

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

  .os .step,
  .os .step-circle {
    color: var(--maui-color-grey-06);
  }

  .os .step-circle {
    ${d({ size: "copy-small", tenant: "os", omitLineHeight: !0 })};