only {
    inset: 0;
    width: auto;
    height: auto;
  }
`, Jd = s`
  ${Pn("lh")}
`, eu = s`
  ${Pn("b2b")}
`, tu = s`
  .os.default:not([disabled]),
  .os.selectable:not([disabled]) {
    --maui-icon-button-background-color: var(--maui-color-grey-02);
  }

  .os.default:not([disabled]) .icon maui-icon,
  .os.default:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .os.default:not([disabled]).icon-button:hover .icon maui-icon,
  .os.default:not([disabled]).icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .os.selectable:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonprimary
    );
  }

  .os.selectable:not([disabled]):hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
  }

  .os.selectable:not([disabled]):hover .icon maui-icon,
  .os.selectable:not([disabled]):hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .os.selectable:not([disabled]).selected .icon maui-icon,
  .os.selectable:not([disabled]).selected .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .os.selectable.inverted:not([disabled]) {
    --maui-focus-outline-offset: 6px;
    border: 2px solid var(--maui-color-interaction-interaction-inverted);
    --maui-icon-button-background-color: transparent;
  }

  .os.selectable.inverted:hover:not([disabled]) {
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }

  .os.selectable.inverted:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    border-color: var(--maui-color-interaction-interaction-inverted);
  }

  .os.selectable.inverted:not([disabled]).selected:hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
    border-color: var(--maui-color-interaction-interaction-invertedhover);
  }

  .os.selectable.inverted:not([disabled], .selected) .icon maui-icon,
  .os.selectable.inverted:not([disabled], .selected)
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .os.selectable.inverted.selected:not([disabled]) .icon maui-icon,
  .os.selectable.inverted.selected:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .os.selectable.inverted:hover:not([disabled]) .icon maui-icon,
  .os.selectable.inverted:hover:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .os.inverted.transparent:not([disabled]) .icon maui-icon,
  .os.inverted.transparent:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .os.inverted.transparent:not([disabled]).icon-button:hover .icon maui-icon,
  .os.inverted.transparent:not([disabled]).icon-button:hover
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }
`, ou = s`
  .four_y.default:not([disabled]),
  .four_y.selectable:not([disabled]) {
    --maui-icon-button-background-color: var(--maui-color-brand-light);
  }

  .four_y.default:not([disabled]) .icon maui-icon,
  .four_y.default:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .four_y.default:not([disabled]).icon-button:hover .icon maui-icon,
  .four_y.default:not([disabled]).icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .four_y.selectable:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
  }

  .four_y.selectable:not([disabled]):hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
  }

  .four_y.selectable:not([disabled]):hover .icon maui-icon,
  .four_y.selectable:not([disabled]):hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .four_y.selectable:not([disabled]).selected .icon maui-icon,
  .four_y.selectable:not([disabled]).selected .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .four_y.selectable.inverted:not([disabled]) {
    --maui-focus-outline-offset: 4px;
    border: 2px solid var(--maui-color-interaction-interaction-inverted);
    --maui-icon-button-background-color: transparent;
  }

  .four_y.selectable.inverted:hover:not([disabled]) {
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }

  .four_y.selectable.inverted:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    border-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.selectable.inverted:not([disabled]).selected:hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
    border-color: var(--maui-color-interaction-interaction-invertedhover);
  }

  .four_y.selectable.inverted:not([disabled], .selected) .icon maui-icon,
  .four_y.selectable.inverted:not([disabled], .selected)
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .four_y.selectable.inverted.selected:not([disabled]) .icon maui-icon,
  .four_y.selectable.inverted.selected:not([disabled])
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .four_y.selectable.inverted:hover:not([disabled]) .icon maui-icon,
  .four_y.selectable.inverted:hover:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .four_y.inverted.transparent:not([disabled]) .icon maui-icon,
  .four_y.inverted.transparent:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .four_y.inverted.transparent:not([disabled]).icon-button:hover
    .icon
    maui-icon,
  .four_y.inverted.transparent:not([disabled]).icon-button:hover
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }
`, iu = s`
  .sn.default:not([disabled]) {
    --maui-icon-button-background-color: var(--maui-color-brand-light);
  }

  .sn.selectable:not([disabled]) {
    --maui-focus-outline-offset: 4px;
    --maui-icon-button-background-color: var(--maui-color-grey-01);
  }

  .sn.default:not([disabled]) .icon maui-icon,
  .sn.default:not([disabled]) .icon ::slotted(maui-icon),
  .sn.transparent:not([disabled]) .icon maui-icon,
  .sn.transparent:not([disabled]) .icon ::slotted(maui-icon),
  .sn.selectable:not([disabled]) .icon maui-icon,
  .sn.selectable:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.default:not([disabled]).icon-button:hover .icon maui-icon,
  .sn.default:not([disabled]).icon-button:hover .icon ::slotted(maui-icon),
  .sn.transparent:not([disabled]).icon-button:hover .icon maui-icon,
  .sn.transparent:not([disabled]).icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-buttonsecondaryhover
    );
  }

  .sn.selectable:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
  }

  .sn.selectable:not([disabled]):hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
  }

  .sn.selectable:not([disabled]):hover .icon maui-icon,
  .sn.selectable:not([disabled]):hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .sn.selectable:not([disabled]).selected .icon maui-icon,
  .sn.selectable:not([disabled]).selected .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .sn.default:not([disabled]).inverted {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .sn.default:not([disabled]).inverted:hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }

  .sn.selectable.inverted:not([disabled]) {
    --maui-focus-outline-offset: 6px;
    border: 2px solid var(--maui-color-interaction-interaction-inverted);
    --maui-icon-button-background-color: transparent;
  }

  .sn.selectable.inverted:hover:not([disabled]) {
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }

  .sn.selectable.inverted:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .sn.selectable.inverted:not([disabled]).selected:hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }

  .sn.selectable.inverted:not([disabled], .selected) .icon maui-icon,
  .sn.selectable.inverted:not([disabled], .selected)
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .sn.selectable.inverted.selected:not([disabled]) .icon maui-icon,
  .sn.selectable.inverted.selected:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.selectable.inverted:hover:not([disabled]) .icon maui-icon,
  .sn.selectable.inverted:hover:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.inverted.transparent:not([disabled]) .icon maui-icon,
  .sn.inverted.transparent:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .sn.inverted.transparent:not([disabled]).icon-button:hover .icon maui-icon,
  .sn.inverted.transparent:not([disabled]).icon-button:hover
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }
`, au = s`
  .lx.default:not([disabled]),
  .lx.selectable:not([disabled]) {
    --maui-icon-button-background-color: var(--maui-color-brand-light);
  }

  .lx.default:not([disabled]) .icon maui-icon,
  .lx.default:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .lx.default:not([disabled]).icon-button:hover .icon maui-icon,
  .lx.default:not([disabled]).icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .lx.selectable:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonprimary
    );
  }

  .lx.selectable:not([disabled]):hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
  }

  .lx.selectable:not([disabled]):hover .icon maui-icon,
  .lx.selectable:not([disabled]):hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .lx.selectable:not([disabled]).selected .icon maui-icon,
  .lx.selectable:not([disabled]).selected .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .lx.selectable.inverted:not([disabled]) {
    --maui-focus-outline-offset: 4px;
    border: 2px solid var(--maui-color-interaction-interaction-inverted);
    --maui-icon-button-background-color: transparent;
  }

  .lx.selectable.inverted:hover:not([disabled]) {
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }

  .lx.selectable.inverted:not([disabled]).selected {
    --maui-icon-button-background-color: var(--maui-color-grey-01);

    border-color: var(--maui-color-grey-01);
  }

  .lx.selectable.inverted:not([disabled]).selected:hover {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );
    border-color: var(--maui-color-interaction-interaction-invertedhover);
  }

  .lx.selectable.inverted:not([disabled], .selected) .icon maui-icon,
  .lx.selectable.inverted:not([disabled], .selected)
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .lx.selectable.inverted.selected:not([disabled]) .icon maui-icon,
  .lx.selectable.inverted.selected:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .lx.selectable.inverted:hover:not([disabled]) .icon maui-icon,
  .lx.selectable.inverted:hover:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .lx.inverted.transparent:not([disabled]) .icon maui-icon,
  .lx.inverted.transparent:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .lx.inverted.transparent:not([disabled]).icon-button:hover .icon maui-icon,
  .lx.inverted.transparent:not([disabled]).icon-button:hover
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }
`, ru = s`
  .mmg {
    border-radius: 50%;
  }

  .mmg:not(.inverted) {
    box-shadow: 0 var(--maui-spacing-0) var(--maui-spacing-2)
      var(--maui-color-brand-mmg-elevation-1);
  }

  .mmg.default:not([disabled]) {
    --maui-icon-button-background-color: var(--maui-color-brand-light);
  }

  .mmg.selectable:not([disabled]) {
    --maui-focus-outline-offset: 4px;
    --maui-icon-button-background-color: var(--maui-color-brand-light);
  }

  .mmg.default:not([disabled]) .icon maui-icon,
  .mmg.default:not([disabled]) .icon ::slotted(maui-icon),
  .mmg.transparent:not([disabled]) .icon maui-icon,
  .mmg.transparent:not([disabled]) .icon ::slotted(maui-icon),
  .mmg.selectable:not([disabled]) .icon maui-icon,
  .mmg.selectable:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .mmg.default:not([disabled]).icon-button:hover .icon maui-icon,
  .mmg.default:not([disabled]).icon-button:hover .icon ::slotted(maui-icon),
  .mmg.transparent:not([disabled]).icon-button:hover .icon maui-icon,
  .mmg.transparent:not([disabled]).icon-button:hover
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .mmg.selectable:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
  }

  .mmg.selectable:not([disabled]).selected .icon maui-icon,
  .mmg.selectable:not([disabled]).selected .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .mmg.selectable:not([disabled]):hover .icon maui-icon,
  .mmg.selectable:not([disabled]):hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .mmg.transparent:not([disabled]) {
    --maui-focus-outline-offset: 4px;
    box-shadow: none;
  }

  .mmg.default[disabled] .icon maui-icon,
  .mmg.default[disabled] .icon ::slotted(maui-icon),
  .mmg.selectable[disabled] .icon maui-icon,
  .mmg.selectable[disabled] .icon ::slotted(maui-icon),
  .mmg.transparent[disabled] .icon maui-icon,
  .mmg.transparent[disabled] .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .mmg.default:not([disabled]).inverted {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .mmg.selectable.inverted:not([disabled]).selected {
    --maui-icon-button-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .mmg.selectable.inverted:not([disabled], .selected) .icon maui-icon,
  .mmg.selectable.inverted:not([disabled], .selected)
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .mmg.selectable.inverted.selected:not([disabled]) .icon maui-icon,
  .mmg.selectable.inverted.selected:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .mmg.selectable.inverted:hover:not([disabled]) .icon maui-icon,
  .mmg.selectable.inverted:hover:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .mmg.inverted.transparent:not([disabled]) .icon maui-icon,
  .mmg.inverted.transparent:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-inverted
    );
  }

  .mmg.inverted.transparent:not([disabled]).icon-button:hover .icon maui-icon,
  .mmg.inverted.transparent:not([disabled]).icon-button:hover
    .icon
    ::slotted(maui-icon) {
    --maui-icon-color-override: var(
      --maui-color-interaction-interaction-invertedhover
    );
  }
`, nu = [
  Qd,
  Jd,
  tu,
  ou,
  iu,
  au,
  eu,
  ru
];
var su = Object.defineProperty, lu = Object.getOwnPropertyDescriptor, po = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? lu(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 && su(e, t, i), i;
};
class it extends Z {
  constructor() {
    super(), this.type = "default", this.size = "medium", this.shape = "default", this.selected = !1, this.iconSelected = "icon-checkmark", this.focusStyle = "default", this.componentName = "icon-button";
  }
  connectedCallback() {
    super.connectedCallback(), this.emphasized = !0, this.behavior = "button";
  }
  handleClick(e) {
    super.handleClick(e), this.type === "selectable" && (this.selected = !this.selected, this.emit("maui-change", { detail: { selected: this.selected } }));
  }
  getButtonContent() {
    return u`
      <span class="icon">
        <slot
          @slotchange=${this.handleSlotChange}
          ?hidden=${this.illegalAssignment}
          name="icon"
        >
          ${(this.icon || this.selected && this.type === "selectable" && this.iconSelected) && !this.hasSlottedIcon() && !this.illegalAssignment ? u`<maui-icon
                .theme=${this.theme}
                .use=${this.selected && this.type === "selectable" ? this.iconSelected : this.icon}
                .size=${this.size !== "large" ? "small" : "medium"}
              ></maui-icon>` : ""}
        </slot>
      </span>
      <span class="sr-only"
        >${this.ariaLabel || this.name || "icon button"}</span
      >
    `;
  }
  render() {
    return u`<button
      part="base"
      class=${y({
      button: !0,
      [this.componentName]: !0,
      [`shape--${this.shape}`]: !0,
      selected: !!this.selected,
      [`focus-${this.focusStyle}`]: !0,
      ...this.getClasses()
    })}
      .role=${this.type === "selectable" ? "checkbox" : null}
      .ariaChecked=${this.type === "selectable" ? `${this.selected}` : null}
      name=${U(this.name)}
      value=${U(this.value)}
      tabindex=${this.disabled ? "-1" : "0"}
      type=${this.behavior}
      @blur=${this.handleBlur}
      @focus=${this.handleFocus}
      @click=${this.handleClick}
      ?disabled=${this.disabled}
      aria-disabled=${this.disabled ? "true" : "false"}
    >
      ${this.getButtonContent()}
    </button>`;
  }
}
it.styles = nu;
po([
  l({ type: String })
], it.prototype, "type", 2);
po([
  l({ type: String })
], it.prototype, "size", 2);
po([
  l({ type: String })
], it.prototype, "shape", 2);
po([
  l({ type: Boolean, reflect: !0 })
], it.prototype, "selected", 2);
po([
  l({ type: String })
], it.prototype, "icon", 2);
po([
  l({ type: String })
], it.prototype, "iconSelected", 2);
po([
  l({ type: String })
], it.prototype, "focusStyle", 2);
w("maui-icon-button", it);
var cu = Object.defineProperty, du = Object.getOwnPropertyDescriptor, hr = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? du(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 && cu(e, t, i), i;
};
class ha extends it {
  constructor() {
    super(...arguments), this.href = "", this.target = "_blank", this.download = !1;
  }
  connectedCallback() {
    super.connectedCallback(), this.type === "selectable" && (this.type = "default", this.selected = !1, console.warn(
      "Selectable buttons are not supported as links. Please use a different type."
    ));
  }
  render() {
    return u`<a
      class=${y({
      button: !0,
      [this.componentName]: !0,
      [`shape--${this.shape}`]: !0,
      selected: !!this.selected,
      ...this.getClasses()
    })}
      href=${this.href}
      target=${this.target}
      download=${U(this.download || void 0)}
    >
      ${this.getButtonContent()}</a
    >`;
  }
}
hr([
  l()
], ha.prototype, "href", 2);
hr([
  l()
], ha.prototype, "target", 2);
hr([
  l({ type: Boolean })
], ha.prototype, "download", 2);
w("maui-icon-button-link", ha);
const uu = s`
  ${C}

  :host {
    position: relative;
    display: block;
    --maui-image-aspect-ratio-default: auto;
    --maui-image-aspect-ratio-auto: auto;
    --maui-image-aspect-ratio-square: 1 / 1;
    --maui-image-aspect-ratio-2on1: 2 / 1;
    --maui-image-aspect-ratio-2on3: 2 / 3;
    --maui-image-aspect-ratio-3on1: 3 / 1;
    --maui-image-aspect-ratio-3on5: 3 / 5;
    --maui-image-aspect-ratio-4on3: 4 / 3;
    --maui-image-aspect-ratio-16on9: 16 / 9;
    --maui-image-aspect-ratio-21on9: 21 / 9;
  }

  slot::slotted(img) {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }
  .aspect-ratio-default {
    aspect-ratio: var(--maui-image-aspect-ratio-default);
  }
  .aspect-ratio-auto {
    aspect-ratio: var(--maui-image-aspect-ratio-auto);
  }
  .aspect-ratio-square {
    aspect-ratio: var(--maui-image-aspect-ratio-square);
  }
  .aspect-ratio-2on1 {
    aspect-ratio: var(--maui-image-aspect-ratio-2on1);
  }
  .aspect-ratio-2on3 {
    aspect-ratio: var(--maui-image-aspect-ratio-2on3);
  }
  .aspect-ratio-3on1 {
    aspect-ratio: var(--maui-image-aspect-ratio-3on1);
  }
  .aspect-ratio-3on5 {
    aspect-ratio: var(--maui-image-aspect-ratio-3on5);
  }
  .aspect-ratio-4on3 {
    aspect-ratio: var(--maui-image-aspect-ratio-4on3);
  }
  .aspect-ratio-16on9 {
    aspect-ratio: var(--maui-image-aspect-ratio-16on9);
  }
  .aspect-ratio-21on9 {
    aspect-ratio: var(--maui-image-aspect-ratio-21on9);
  }
  .aspect-ratio-custom {
    aspect-ratio: var(
      --maui-image-aspect-ratio-override,
      var(--maui-image-aspect-ratio-default)
    );
  }
`, mu = s`
  .four_y.emphasized::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-image-slice: 1;
    border-width: var(--maui-spacing-3);
    border-style: solid;
    border-image-source: linear-gradient(
      to bottom,
      var(--maui-color-brand-sunny-yellow),
      var(--maui-color-brand-sunny-yellow) 8%,
      var(--maui-color-brand-light-sky-blue) 8%,
      var(--maui-color-brand-light-sky-blue) 18%,
      var(--maui-color-brand-sky-blue) 18%,
      var(--maui-color-brand-sky-blue) 78%,
      var(--maui-color-brand-dark-sky-blue) 78%,
      var(--maui-color-brand-dark-sky-blue) 92%,
      var(--maui-color-brand-night-sky-blue) 92%,
      var(--maui-color-brand-night-sky-blue)
    );
  }

  .four_y.emphasized {
    position: relative;
  }

  .four_y.emphasized slot::slotted(*) {
    position: relative;
    z-index: 1;
  }
`, hu = [uu, mu], Ua = [
  "aspect-ratio-default",
  "aspect-ratio-auto",
  "aspect-ratio-square",
  "aspect-ratio-2on1",
  "aspect-ratio-2on3",
  "aspect-ratio-3on1",
  "aspect-ratio-3on5",
  "aspect-ratio-4on3",
  "aspect-ratio-16on9",
  "aspect-ratio-21on9",
  "aspect-ratio-custom"
];
function pu(a, e, t, o) {
  o.forEach((i) => {
    t === i.value && console.warn(
      `%cDeprecation in ${a} component: %cThe property %c"${e}"%c value %c"${t}"%c is deprecated. Please use the new value %c"${i.newValue}"%c.`,
      "color: red",
      "color: teal",
      "color: orange",
      "color: teal",
      "color: red",
      "color: teal",
      "color: green",
      "color: teal"
    );
  });
}
function gu(a, e, t, o) {
  console.warn(
    `%cDeprecation in ${a} component: %cThe default value for property %c"${e}"%c has changed from %c"${t}"%c to %c"${o}"%c.`,
    "color: red",
    "color: teal",
    "color: orange",
    "color: teal",
    "color: red",
    "color: teal",
    "color: green",
    "color: teal"
  );
}
function bu(a, e, t) {
  console.warn(
    `%cDeprecation in ${a} component: %cThe property %c"${e}"%c is deprecated. Please use %c"${t}"%c instead.`,
    "color: red",
    "color: teal",
    "color: orange",
    "color: teal",
    "color: red",
    "color: teal"
  );
}
var vu = Object.defineProperty, fu = Object.getOwnPropertyDescriptor, _i = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? fu(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 && vu(e, t, i), i;
};
class go extends k {
  constructor() {
    super(), this.aspectRatioVariant = "default", this.aspectRatioWidth = 1, this.aspectRatioHeight = 1, this.emphasized = !1, this.componentName = "image";
  }
  firstUpdated() {
    if (super.firstUpdated(), (this.aspectRatioVariant === "default" || this.aspectRatioVariant === "aspect-ratio-default") && gu("image", "aspectRatioVariant", "16:9", "auto"), Ua.includes(
      this.aspectRatioVariant
    )) {
      const e = Ua.map((t) => {
        switch (t) {
          case "aspect-ratio-default":
            return { value: "aspect-ratio-default", newValue: "default" };
          case "aspect-ratio-auto":
            return { value: "aspect-ratio-auto", newValue: "default" };
          case "aspect-ratio-square":
            return { value: "aspect-ratio-square", newValue: "square" };
          case "aspect-ratio-2on1":
            return { value: "aspect-ratio-2on1", newValue: "2:1" };
          case "aspect-ratio-2on3":
            return { value: "aspect-ratio-2on3", newValue: "2:3" };
          case "aspect-ratio-3on1":
            return { value: "aspect-ratio-3on1", newValue: "3:1" };
          case "aspect-ratio-3on5":
            return { value: "aspect-ratio-3on5", newValue: "3:5" };
          case "aspect-ratio-4on3":
            return { value: "aspect-ratio-4on3", newValue: "4:3" };
          case "aspect-ratio-16on9":
            return { value: "aspect-ratio-16on9", newValue: "16:9" };
          case "aspect-ratio-21on9":
            return { value: "aspect-ratio-21on9", newValue: "21:9" };
          case "aspect-ratio-custom":
            return { value: "aspect-ratio-custom", newValue: "custom" };
          default:
            return { value: "aspect-ratio-default", newValue: "default" };
        }
      });
      pu(
        "image",
        "aspectRatioVariant",
        this.aspectRatioVariant,
        e
      ), Ua.includes(
        this.aspectRatioVariant
      ) && (this.aspectRatioVariant = e.find(
        ({ value: t }) => t === this.aspectRatioVariant
      )?.newValue);
    }
  }
  handleSlotChange(e) {
    switch (e.target.name) {
      case "skeleton": {
        X(e.target, [
          "MAUI-SKELETON"
        ]);
        const o = e.target.assignedNodes();
        this.isSkeleton = o.length > 0;
        break;
      }
      default: {
        X(e.target, [
          "IMG",
          "MAUI-SKELETON"
        ]);
        break;
      }
    }
  }
  render() {
    const e = `aspect-ratio-${this.aspectRatioVariant.replace(":", "on")}` || "default";
    return u`
      <div
        class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [e]: !0,
      emphasized: !!this.emphasized,
      "is-skeleton": !!this.isSkeleton
    })}
        style="--maui-image-aspect-ratio-override: ${this.aspectRatioWidth} / ${this.aspectRatioHeight}"
      >
        <slot
          @slotchange=${this.handleSlotChange}
          ?hidden=${this.isSkeleton}
        ></slot>
        <slot @slotchange=${this.handleSlotChange} name="skeleton"></slot>
      </div>
    `;
  }
}
go.styles = hu;
_i([
  l({ type: String, reflect: !0 })
], go.prototype, "aspectRatioVariant", 2);
_i([
  l({ type: Number, reflect: !0 })
], go.prototype, "aspectRatioWidth", 2);
_i([
  l({ type: Number, reflect: !0 })
], go.prototype, "aspectRatioHeight", 2);
_i([
  l({ type: Boolean, reflect: !0 })
], go.prototype, "emphasized", 2);
_i([
  O()
], go.prototype, "isSkeleton", 2);
w("maui-image", go);
const Hn = (a) => {
  const e = h(a);
  return s`
    .${e}.link:not([disabled]):hover .label {
      text-decoration: none;
    }

    .${e}.small {
      ${p({ size: "link-small", tenant: a })};
    }

    .${e}.medium {
      ${p({ size: "link-medium", tenant: a })};
    }

    .${e}.large {
      ${p({ size: "link-large", tenant: a })};
    }
  `;
}, yu = s`
  ${A}

  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
  }

  .link:not([disabled]),
  button:not([disabled]) {
    cursor: pointer;
  }

  .link {
    text-decoration: none;
    position: relative;
    color: var(--maui-color-interaction-interaction);
    transition: color 0.3s ease-out;
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-bold);
  }

  .link:not([disabled]):hover {
    color: var(--maui-color-interaction-interactionhover);
    transition: color 0.3s ease-in;
  }

  .link ::slotted(maui-icon) {
    pointer-events: none;
  }

  .link maui-icon,
  .link ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-interaction-interaction);
  }

  .link:not([disabled]):hover maui-icon,
  .link:not([disabled]):hover ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-interaction-interactionhover);
  }

  .link:not([disabled]):hover .label {
    text-decoration: underline;
  }

  .link:not([disabled]).inverted {
    color: var(--maui-color-interaction-interaction-inverted);
  }
  .link:not([disabled]).inverted maui-icon,
  .link:not([disabled]).inverted ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-interaction-interaction-inverted);
  }
  .link:not([disabled]).inverted {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x, 0)
      var(--maui-effect-shadow-focus-offset-y, 0)
      var(--maui-effect-shadow-focus-radius, 0)
      var(--maui-effect-shadow-focus-spread, 1px)
      var(--maui-color-interaction-focus-inverted);
  }

  .link:not([disabled]).inverted:hover {
    color: var(--maui-color-interaction-interaction-invertedhover);
  }
  .link:not([disabled]).inverted:hover maui-icon,
  .link:not([disabled]).inverted:hover ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-interaction-interaction-invertedhover);
  }

  .link[disabled] maui-icon,
  .link[disabled] ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-disabled-foreground);
  }
  .link[disabled].inverted maui-icon,
  .link[disabled].inverted ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-disabled-foreground-inverted);
  }

  .link[disabled] {
    cursor: not-allowed;
    color: var(--maui-color-disabled-foreground);
  }

  .link[disabled].inverted {
    color: var(--maui-color-disabled-foreground-inverted);
  }

  .standalone {
    display: inline-grid;
    place-content: baseline;
  }

  .inline {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    align-items: baseline;
  }

  .standalone.has-prefix {
    grid-template-areas: 'icon label';
  }

  .standalone.has-suffix {
    grid-template-areas: 'label icon';
  }

  .standalone:not(.has-prefix):not(.has-suffix) {
    grid-template-areas: 'label';
  }

  .prefix,
  .suffix {
    grid-area: icon;
  }

  .label {
    grid-area: label;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-align: left;
  }

  .small {
    ${p({ size: "link-small", tenant: "wl" })};
    --maui-icon-font-size: var(--maui-line-height-1);
  }

  .medium {
    ${p({ size: "link-medium", tenant: "wl" })};
  }

  .small.standalone:not(.icon-only),
  .medium.standalone:not(.icon-only) {
    column-gap: var(--maui-spacing-2);
  }

  .small.inline:not(.icon-only) .prefix,
  .medium.inline:not(.icon-only) .prefix {
    margin-right: var(--maui-spacing-2);
  }

  .small.inline:not(.icon-only) .suffix,
  .medium.inline:not(.icon-only) .suffix {
    margin-left: var(--maui-spacing-2);
  }

  .large {
    ${p({ size: "link-large", tenant: "wl" })};
  }

  .large.standalone:not(.icon-only) {
    column-gap: var(--maui-spacing-2);
  }

  .large.inline:not(.icon-only) .prefix {
    margin-right: var(--maui-spacing-2);
  }

  .large.inline:not(.icon-only) .suffix {
    margin-left: var(--maui-spacing-2);
  }

  .prefix,
  .suffix {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-self: baseline;
    align-items: center;
    justify-content: center;
  }

  .small .prefix,
  .small .suffix {
    width: 14px;
    height: 14px;
  }

  .medium .prefix,
  .medium .suffix {
    width: 16px;
    height: 16px;
  }

  .large .prefix,
  .large .suffix {
    width: 24px;
    height: 24px;
  }

  .inline .prefix,
  .inline .suffix {
    align-self: start;
  }

  ${H("link")}
`, xu = s`
  ${Hn("lh")}
`, $u = s`
  @keyframes hover {
    0% {
      background-image: linear-gradient(transparent, transparent);
      background-position: 100% 80%;
    }
    25% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #28597140),
        var(--maui-color-rgb-interaction-interactionhover, #28597140)
      );
    }
    50% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #28597180),
        var(--maui-color-rgb-interaction-interactionhover, #28597180)
      );
    }
    75% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #285971bf),
        var(--maui-color-rgb-interaction-interactionhover, #285971bf)
      );
    }
    100% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #285971),
        var(--maui-color-rgb-interaction-interactionhover, #285971)
      );
      background-position: 100% 100%;
    }
  }

  @keyframes hover-inverted {
    0% {
      background-image: linear-gradient(transparent, transparent);
      background-position: 100% 80%;
    }
    25% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #ffffff40),
        var(--maui-color-rgb-interaction-interactionhover, #ffffff40)
      );
    }
    50% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #ffffff80),
        var(--maui-color-rgb-interaction-interactionhover, #ffffff80)
      );
    }
    75% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #ffffffbf),
        var(--maui-color-rgb-interaction-interactionhover, #ffffffbf)
      );
    }
    100% {
      background-image: linear-gradient(
        var(--maui-color-rgb-interaction-interactionhover, #ffffff),
        var(--maui-color-rgb-interaction-interactionhover, #ffffff)
      );
      background-position: 100% 100%;
    }
  }

  .os.link {
    font-weight: var(--maui-font-weight-regular);
  }

  .os.link:not([disabled]) .label {
    display: block;
  }

  .os.link:not([disabled]):hover .label {
    text-decoration: none;
  }

  .os.link:not([disabled]):hover .label span {
    text-decoration: none;
    animation-duration: 0.3s;
    animation-name: hover;
    background-image: linear-gradient(
      var(--maui-color-interaction-interactionhover),
      var(--maui-color-interaction-interactionhover)
    );
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .os.link:not([disabled]).inverted:hover .label span {
    animation-name: hover-inverted;

    background-image: linear-gradient(
      var(--maui-color-interaction-interaction-invertedhover),
      var(--maui-color-interaction-interaction-invertedhover)
    );
  }

  .os.small .prefix,
  .os.small .suffix {
    height: var(--maui-line-height-1);
  }

  .os.medium .prefix,
  .os.medium .suffix {
    height: 20px;
  }

  .os.large .prefix,
  .os.large .suffix {
    height: var(--maui-line-height-3);
  }

  .os.small {
    ${p({ size: "link-small", tenant: "os" })};
  }

  .os.medium {
    ${p({ size: "link-medium", tenant: "os" })};
  }

  .os.large {
    ${p({ size: "link-large", tenant: "os" })};
  }
`, wu = s`
  .lx.link {
    font-weight: var(--maui-font-weight-regular);
  }

  .lx.small {
    ${p({ size: "link-small", tenant: "lx" })};
  }

  .lx.medium {
    ${p({ size: "link-medium", tenant: "lx" })};
  }

  .lx.large {
    ${p({ size: "link-large", tenant: "lx" })};
  }

  .lx.small .prefix,
  .lx.small .suffix {
    height: var(--maui-line-height-1);
  }

  .lx.medium .prefix,
  .lx.medium .suffix {
    height: var(--maui-line-height-2);
  }

  .lx.large .prefix,
  .lx.large .suffix {
    height: var(--maui-line-height-4);
  }

  .lx.hyper maui-icon,
  .lx.back maui-icon,
  .lx.anchor-top maui-icon,
  .lx.anchor-down maui-icon {
    --maui-icon-color: var(--maui-color-interaction-buttonprimary);
  }

  .link.lx.hyper:not([disabled], .inverted):hover maui-icon,
  .link.lx.back:not([disabled], .inverted):hover maui-icon,
  .link.lx.anchor-top:not([disabled], .inverted):hover maui-icon,
  .link.lx.anchor-down:not([disabled], .inverted):hover maui-icon {
    --maui-icon-color: var(--maui-color-interaction-buttonprimaryhover);
  }
`, _u = s`
  .sn.link {
    font-weight: var(--maui-font-weight-regular);
  }

  .sn.small {
    ${p({ size: "link-small", tenant: "sn" })};
  }

  .sn.medium {
    ${p({ size: "link-medium", tenant: "sn" })};
  }

  .sn.large {
    ${p({ size: "link-large", tenant: "sn" })};
  }

  .sn.small .prefix,
  .sn.small .suffix {
    height: var(--maui-line-height-1);
  }

  .sn.medium .prefix,
  .sn.medium .suffix {
    height: var(--maui-line-height-2);
  }

  .sn.large .prefix,
  .sn.large .suffix {
    height: var(--maui-line-height-7);
  }

  .sn.icon-only maui-icon {
    --maui-icon-color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.icon-only:hover maui-icon {
    --maui-icon-color: var(--maui-color-interaction-buttonsecondaryhover);
  }
`, ku = s`
  .four_y {
    font-family: var(--maui-font-family-headline);
  }

  .four_y.small {
    ${p({ size: "link-small", tenant: "four_y" })};
  }

  .four_y.medium {
    ${p({ size: "link-medium", tenant: "four_y" })};
  }

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

  .four_y:not(.icon-only) .prefix,
  .four_y:not(.icon-only) .suffix {
    height: var(--maui-line-height-2);
  }

  .four_y:not(.icon-only).medium .prefix,
  .four_y:not(.icon-only).medium .suffix {
    height: var(--maui-line-height-3);
  }

  .four_y:not(.icon-only).large .prefix,
  .four_y:not(.icon-only).large .suffix {
    height: var(--maui-line-height-4);
  }

  .four_y.icon-only .prefix,
  .four_y.icon-only .suffix {
    width: 16px;
    height: 16px;
  }

  .four_y.icon-only.medium .prefix,
  .four_y.icon-only.medium .suffix {
    width: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
    height: calc(var(--maui-spacing-3) + var(--maui-spacing-2));
  }

  .four_y.icon-only.large .prefix,
  .four_y.icon-only.large .suffix {
    width: var(--maui-spacing-4);
    height: var(--maui-spacing-4);
  }

  .four_y.icon-only {
    --maui-focus-outline-offset: 2px;
    --maui-focus-radius: var(--maui-radii-pill-radius);
  }
`, Su = s`
  ${Hn("b2b")}
`, Ou = s`
  .mmg.link {
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-headline);
  }

  .mmg.link:not([disabled]):hover .label {
    text-decoration: none;
  }

  .mmg.xlarge,
  .mmg.xlarge .suffix {
    height: var(--maui-font-size-3);
    font-size: var(--maui-line-height-4);
  }

  .mmg.large {
    font-size: var(--maui-font-size-3);
    line-height: var(--maui-line-height-4);
  }

  .mmg.medium {
    font-size: var(--maui-font-size-2);
    line-height: var(--maui-line-height-2);
  }

  .mmg.small {
    font-size: var(--maui-font-size-1);
    line-height: var(--maui-line-height-1);
  }

  .mmg.link:not(.inverted):hover maui-icon,
  .mmg.link:not(.inverted):hover ::slotted(maui-icon) {
    --maui-icon-color: var(--maui-color-interaction-interactionhover);
  }
`, Mu = [
  yu,
  xu,
  $u,
  wu,
  _u,
  Su,
  ku,
  Ou
];
var Lu = Object.defineProperty, Bu = Object.getOwnPropertyDescriptor, at = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Bu(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 && Lu(e, t, i), i;
};
const Ie = class ji extends k {
  constructor() {
    super(), this.hasSlotController = new be(
      this,
      "prefix",
      "suffix",
      "icon"
    ), this.type = "navigational", this.tag = Me`a`, this.target = "_self", this.as = "link", this.disabled = !1, this.mode = "standalone", this.size = "medium", this.variant = "hyper", this.iconOnly = !1, this.inverted = !1, this.componentName = "link";
  }
  static getIconSize(e) {
    switch (e) {
      case "large":
        return "medium";
      case "medium":
        return "small";
      case "small":
        return "small";
      default:
        return "small";
    }
  }
  getDisplaySize() {
    return this.size || "medium";
  }
  /** Test slotted elements to be only one maui-icon and nothing else. If anything else is present, don't show children altogether. */
  testAllowedAssignments(e) {
    e.target.assignedNodes().forEach((o) => {
      o.nodeName !== "MAUI-ICON" && (console.error(
        `<maui-list> Only <maui-icon> is accepted as a child component for either prefix or suffix slots. Removed: ${o.nodeName}`
      ), o.parentNode.removeChild(o));
    });
  }
  handleSlotChange(e) {
    this.testAllowedAssignments(e);
    const t = e.target.name;
    (t === "prefix" || t === "suffix" || t === "icon") && e.target.assignedNodes({
      flatten: !0
    }).forEach((i) => {
      i.nodeName === "MAUI-ICON" && i.setAttribute(
        "size",
        ji.getIconSize(this.getDisplaySize())
      );
    });
  }
  /** Get icon based on link variant */
  getIcon() {
    switch (this.variant) {
      case "hyper":
        return "icon-hyperlink";
      case "external":
        return "icon-external";
      case "back":
        return "icon-backlink";
      case "anchor-down":
        return "icon-anchor-down";
      case "anchor-top":
        return "icon-anchor-top";
      case "collapse":
        return "icon-collapse";
      case "expand":
        return "icon-expand";
      case "baggage-info":
        return "icon-baggage";
      case "checkin":
        return "icon-check-in";
      case "close":
        return "icon-close";
      case "delete":
        return "icon-delete";
      case "edit":
        return "icon-edit";
      case "dialog":
        return "icon-dialog";
      case "flight-status":
        return "icon-service-flight-status";
      case "login":
        return "icon-service-login";
      case "logout":
        return "icon-logout";
      default:
        return;
    }
  }
  getPrefix() {
    const e = this.hasSlotController.test("prefix"), t = this.hasSlotController.test("icon");
    if (!(this.variant === "custom" && !e && !t)) {
      if (this.variant === "custom" && e && !t)
        return u`<span class="prefix"
        ><span class="slot-wrapper"
          ><slot
            name="prefix"
            @slotchange=${this.handleSlotChange}
          ></slot></span
      ></span>`;
      if (this.type === "service" || this.type === "button" || this.type === "mimic" || this.type === "navigational" && this.theme !== "lx" || this.type === "navigational" && this.theme === "lx" && this.variant === "back")
        return u`<span class="prefix"
        >${t ? u`
              <span class="slot-wrapper"
                ><slot name="icon" @slotchange=${this.handleSlotChange}></slot
              ></span>
            ` : u`<maui-icon
              .theme=${this.theme}
              .use=${this.getIcon()}
              .size=${ji.getIconSize(this.getDisplaySize())}
            ></maui-icon>`}</span
      > `;
    }
  }
  getSuffix() {
    const e = this.hasSlotController.test("suffix"), t = this.hasSlotController.test("icon");
    if (!(this.variant === "custom" && !e && !t)) {
      if (this.variant === "custom" && e && !t)
        return u`<span class="suffix"
        ><span class="slot-wrapper"
          ><slot
            name="suffix"
            @slotchange=${this.handleSlotChange}
          ></slot></span
      ></span>`;
      if (this.type === "functional" || this.type === "navigational" && this.theme === "lx" && this.variant !== "back")
        return u`<span class="suffix"
        >${t ? u`
              <span class="slot-wrapper"
                ><slot name="icon" @slotchange=${this.handleSlotChange}></slot
              ></span>
            ` : u`<maui-icon
              .theme=${this.theme}
              .use=${this.getIcon()}
              .size=${ji.getIconSize(this.getDisplaySize())}
            ></maui-icon>`}</span
      >`;
    }
  }
  /** Simulates a click on the link. */
  click() {
    this.link?.click();
  }
  /** Sets focus on the link. */
  focus(e) {
    this.link?.focus(e);
  }
  /** Removes focus from the link. */
  blur() {
    this.link?.blur();
  }
  handleBlur() {
    xt(this, "maui-blur");
  }
  handleFocus() {
    xt(this, "maui-focus");
  }
  handleClick(e) {
    this.disabled && (e.preventDefault(), e.stopPropagation());
  }
  render() {
    const e = this.mode || "standalone", t = this.getDisplaySize(), o = this.type || "navigational", i = this.variant || "hyper", { tag: r } = this, n = this.as || "link";
    return ur`<${r}
      href=${U(this.href)}
      target=${U(this.href ? this.target : void 0)}
      .role=${n}
      @blur=${this.handleBlur}
      @focus=${this.handleFocus}
      @click=${this.handleClick}
      ?disabled=${this.disabled}
      aria-disabled=${this.disabled ? "true" : "false"}
      aria-label=${U(this.ariaLabel)}
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [o]: !0,
      [i]: !0,
      [e]: !0,
      [t]: !0,
      inverted: this.inverted,
      "icon-only": this.iconOnly,
      "has-prefix": !!this.getPrefix(),
      "has-suffix": !!this.getSuffix()
    })}
      tabindex=${this.disabled ? "-1" : "0"}
    >
      ${this.getPrefix()}
      ${this.iconOnly ? "" : u` <div class="label">
              <span><slot></slot></span>
            </div>`}
      ${this.getSuffix()}
    </${r}>`;
  }
};
Ie.styles = Mu;
at([
  M(".link")
], Ie.prototype, "link", 2);
at([
  l()
], Ie.prototype, "href", 2);
at([
  l()
], Ie.prototype, "target", 2);
at([
  l({ type: String })
], Ie.prototype, "as", 2);
at([
  l({ type: Boolean, reflect: !0 })
], Ie.prototype, "disabled", 2);
at([
  l()
], Ie.prototype, "mode", 2);
at([
  l()
], Ie.prototype, "size", 2);
at([
  l()
], Ie.prototype, "variant", 2);
at([
  l({ type: Boolean })
], Ie.prototype, "iconOnly", 2);
at([
  l({ type: Boolean })
], Ie.prototype, "inverted", 2);
let Eo = Ie;
class Cu extends Eo {
  constructor() {
    super(), this.type = "functional";
  }
}
w("maui-functional-link", Cu);
class zu extends Eo {
  constructor() {
    super(), this.tag = Me`button`, this.type = "functional", this.iconOnly = !0;
  }
}
w("maui-icon-link", zu);
class Au extends Eo {
  constructor() {
    super(), this.type = "navigational";
  }
}
w("maui-navigation-link", Au);
class Fu extends Eo {
  constructor() {
    super(), this.type = "service";
  }
}
w("maui-service-link", Fu);
var Nu = Object.defineProperty, Iu = Object.getOwnPropertyDescriptor, Uu = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Iu(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 && Nu(e, t, i), i;
};
class Gn extends Eo {
  constructor() {
    super(...arguments), this.type = "navigational", this.tag = Me`button`;
  }
}
Uu([
  l()
], Gn.prototype, "type", 2);
w("maui-link-button", Gn);
var Ru = Object.defineProperty, Du = Object.getOwnPropertyDescriptor, Eu = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Du(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 && Ru(e, t, i), i;
};
class Yn extends Eo {
  constructor() {
    super(...arguments), this.type = "navigational", this.tag = Me`span`;
  }
}
Eu([
  l()
], Yn.prototype, "type", 2);
w("maui-link-mimic", Yn);
const Tn = {
  "x-small": new Array(3).fill(
    "loading-frame-x-small loading-animation loading-animation"
  ),
  small: new Array(3).fill(
    "loading-frame-small loading-animation loading-animation"
  ),
  medium: new Array(6).fill(
    "loading-frame-medium loading-animation loading-animation"
  ),
  large: new Array(9).fill(
    "loading-frame-large loading-animation loading-animation"
  )
}, Pu = Tn.large.map((a, e) => {
  const t = a.split(" "), o = h(
    `${t[t.length - 1]}-${e}`
  ), i = e * 0.15 + 0.475;
  return s`
    .${o} {
      animation-delay: ${h(i)}s;
    }
  `;
}), Xn = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --loader-box-large-width: 278px;
      --loader-box-medium-width: 172px;
      --loader-box-small-width: 76px;
      --loader-box-x-small-width: 31px;
      --loader-dot-color: var(--maui-color-brand-lhyellow);
      --loader-label-color: var(--maui-color-brand-lhdeepblue);
      --loader-label-margins: 40px auto 10px auto;
      --loader-box-margins: auto;
      --loader-label-font-family: var(--maui-font-family-copy);
      --loader-loading-frame-x-small: 8px;
      --loader-loading-frame-dot: 14px;
      --loader-small-label-weight: var(--maui-font-weight-regular);
      --loader-medium-label-weight: var(--maui-font-weight-regular);
      --loader-large-label-weight: var(--maui-font-weight-regular);
    }

    .${e} .label {
      ${d({ size: "copy-medium", tenant: a })};
    }
  `;
}, Hu = s`
  ${C}

  ${A}

  .label {
    ${d({ size: "copy-small", tenant: "wl" })};
    font-family: var(--maui-font-family-copy);
    margin: var(--loader-label-margins);
    color: var(--loader-label-color);
    text-align: center;
    vertical-align: middle;
  }

  .size-x-small {
    --loader-scale-factor: 0.5;
  }

  .size-x-small .label {
    display: none;
  }

  .size-x-small,
  .size-small {
    font-weight: var(--loader-small-label-weight);
  }

  .size-medium {
    font-weight: var(--loader-medium-label-weight);
  }

  .size-large {
    font-weight: var(--loader-large-label-weight);
  }

  .loading-animation-active .loading-animation {
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: loading-bounce;
    opacity: 0.35;
    background-color: var(--loader-dot-color);
  }

  .size-x-small .loading-animation {
    transform: scale(0.5);
  }

  .size-small .loading-animation,
  .size-medium .loading-animation {
    transform: scale(0.6);
  }

  .size-large .loading-animation {
    transform: scale(0.45);
  }

  .loading-frame-x-small {
    border-radius: var(--loader-loading-frame-x-small);
    height: var(--loader-loading-frame-x-small);
    width: var(--loader-loading-frame-x-small);
  }

  .loading-frame-small,
  .loading-frame-medium,
  .loading-frame-large {
    border-radius: var(--loader-loading-frame-dot);
    height: var(--loader-loading-frame-dot);
    width: var(--loader-loading-frame-dot);
  }
  .loading-frames {
    display: flex;
    justify-content: space-between;
  }

  .loader-box-large {
    margin: var(--loader-box-margins);
    width: var(--loader-box-large-width);
  }

  .loader-box-medium {
    margin: var(--loader-box-margins);
    width: var(--loader-box-medium-width);
  }

  .loader-box-small {
    margin: var(--loader-box-margins);
    width: var(--loader-box-small-width);
  }

  .loader-box-x-small {
    margin: var(--loader-box-margins);
    width: var(--loader-box-x-small-width);
  }

  @keyframes loading-bounce {
    0% {
      background-color: var(--loader-dot-color);
      transform: scale(var(--loader-scale-factor, 0.6));
      opacity: 0.35;
    }

    33% {
      background-color: var(--loader-dot-color);
      transform: scale(1);
      opacity: 1;
    }

    100% {
      background-color: var(--loader-dot-color);
      transform: scale(var(--loader-scale-factor, 0.6));
      opacity: 0.35;
    }
  }
`, Gu = s`
  .os {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    --loader-label-margins: 10px 0 0 0;
    --loader-box-margins: null;
    --loader-label-font-family: var(--maui-font-family-copy);
    --loader-label-color: var(--maui-color-brand-black);
    --loader-box-large-width: 36px;
    --loader-box-medium-width: 27px;
    --loader-box-small-width: 18px;
    --loader-box-x-small-width: 12px;
    --loader-small-label-weight: var(--maui-font-weight-regular);
    --loader-medium-label-weight: var(--maui-font-weight-regular);
    --loader-large-label-weight: var(--maui-font-weight-regular);
  }

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

  .os.size-small {
    justify-content: left;
    flex-direction: row;
    --loader-label-margins: 0 9px 0 0;
    --loader-box-margins: null;
    align-items: initial;
  }

  .os.size-x-small {
    justify-content: left;
    flex-direction: row-reverse;
    --loader-label-margins: 0 0 0 12px;
    --loader-box-margins: null;
  }

  .loader-circular {
    height: 100%;
    transform-origin: center center;
    width: 100%;
  }

  .loader-circular path {
    stroke: var(--maui-color-brand-os-red);
  }

  .size-x-small .loader-circular path {
    stroke-width: 6px;
  }

  .size-small .loader-circular path {
    stroke-width: 4px;
  }

  #circle-loader-1-s-path1_tr {
    animation: circle-loader-1-s-path1_tr__tr 3000ms linear infinite normal
      forwards;
  }

  @keyframes circle-loader-1-s-path1_tr__tr {
    0% {
      transform: translate(25px, 25px) rotate(0deg);
    }

    100% {
      transform: translate(25px, 25px) rotate(1080deg);
    }
  }

  #circle-loader-1-s-path1 {
    animation-name: circle-loader-1-s-path1_s_do, circle-loader-1-s-path1_s_da;
    animation-duration: 3000ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-iteration-count: infinite;
  }

  @keyframes circle-loader-1-s-path1_s_do {
    0% {
      stroke-dashoffset: 7;
    }

    49.666667% {
      stroke-dashoffset: 109;
    }

    100% {
      stroke-dashoffset: 7;
    }
  }

  @keyframes circle-loader-1-s-path1_s_da {
    0% {
      stroke-dasharray: 116.255291;
    }

    49.666667% {
      stroke-dasharray: 116.255291;
    }

    100% {
      stroke-dasharray: 116.255291;
    }
  }
`, Yu = s`
  ${Xn("lh")}
`, Tu = s`
  .lx {
    --loader-box-large-width: 278px;
    --loader-box-medium-width: 184px;
    --loader-box-small-width: 82px;
    --loader-box-x-small-width: 31px;
    --loader-dot-color: var(--maui-color-brand-lx-red);
    --loader-label-color: var(--maui-color-grey-08);
    --loader-x-small-label-weight: var(--maui-font-weight-regular);
    --loader-medium-label-weight: var(--maui-font-weight-regular);
    --loader-large-label-weight: var(--maui-font-weight-regular);
    --loader-label-margins: 40px auto 10px auto;
    --loader-box-margins: auto;
    --loader-label-font-family: var(--maui-font-family-copy);
    --loader-loading-frame-x-small: 8px;
    --loader-loading-frame-dot: 16px;
  }

  .lx .label {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, Xu = s`
  .sn {
    --loader-box-large-width: 278px;
    --loader-box-medium-width: 184px;
    --loader-box-small-width: 82px;
    --loader-box-x-small-width: 29px;
    --loader-dot-color: var(--maui-color-brand-sn-red-2);
    --loader-label-color: var(--maui-color-grey-08);
    --loader-x-small-label-weight: var(---maui-font-weight-regular);
    --loader-medium-label-weight: var(---maui-font-weight-regular);
    --loader-large-label-weight: var(---maui-font-weight-regular);
    --loader-label-margins: 40px auto 10px auto;
    --loader-box-margins: 0 auto auto;
    --loader-label-font-family: var(--maui-font-family-copy);
    --loader-loading-frame-x-small: 8px;
    --loader-loading-frame-dot: 16px;
  }

  .sn .label {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, Vu = s`
  ${Xn("b2b")}

  .b2b {
    --loader-dot-color: var(--maui-color-brand-secondary);
    --loader-label-color: var(--maui-color-text-copy);
  }
`, ju = s`
  .four_y {
    --loader-box-large-width: 278px;
    --loader-box-medium-width: 184px;
    --loader-box-small-width: 82px;
    --loader-box-x-small-width: 29px;
    --loader-dot-color: var(--maui-color-brand-dot-sunny-yellow);
    --loader-label-color: var(--maui-color-text-headline);
    --loader-x-small-label-weight: var(---maui-font-weight-regular);
    --loader-medium-label-weight: var(---maui-font-weight-regular);
    --loader-large-label-weight: var(---maui-font-weight-regular);
    --loader-label-margins: 40px auto 10px auto;
    --loader-box-margins: 0 auto auto;
    --loader-label-font-family: var(--maui-font-family-copy);
    --loader-loading-frame-x-small: 8px;
    --loader-loading-frame-dot: 16px;
  }

  .four_y .label {
    ${d({ size: "copy-small", tenant: "four_y" })};
  }
`, qu = s`
  .mmg {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    --loader-label-margins: 10px 0 0 0;
    --loader-box-margins: null;
    --loader-label-font-family: var(--maui-font-family-copy);
    --loader-label-color: var(--maui-color-interaction-interaction);
    --loader-box-large-width: var(--maui-line-height-8);
    --loader-box-medium-width: var(--maui-font-size-7);
    --loader-box-small-width: var(--maui-line-height-3);
    --loader-box-x-small-width: var(--maui-font-size-1);
    --loader-small-label-weight: var(--maui-font-weight-regular);
    --loader-medium-label-weight: var(--maui-font-weight-regular);
    --loader-large-label-weight: var(--maui-font-weight-regular);
  }

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

  .mmg.size-small {
    --loader-box-margins: null;
    ${d({ size: "copy-small", tenant: "mmg" })};
  }

  .mmg.size-x-small {
    --loader-box-margins: null;
  }

  .loader-circular {
    height: 100%;
    transform-origin: center center;
    width: 100%;
  }

  .loader-circular path {
    stroke: var(--maui-color-brand-primary);
  }

  .size-x-small .loader-circular path {
    stroke-width: 6px;
  }

  .size-small .loader-circular path {
    stroke-width: 4px;
  }
`, Ku = [
  ...Pu,
  Hu,
  Yu,
  Gu,
  Tu,
  Xu,
  Vu,
  ju,
  qu
], Wu = `
<svg class="loader-circular" id="circle-loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" >
  <g id="circle-loader-1-s-path1_tr" transform="translate(25,25) rotate(0)">
    <path id="circle-loader-1-s-path1" d="M43.5,25c0,10.2173-8.2827,18.5-18.5,18.5s-18.5-8.2827-18.5-18.5s8.2827-18.5,18.5-18.5s18.5,8.2827,18.5,18.5Z" transform="scale(-1,1) translate(-25,-25)" fill="none" stroke-linecap="round" stroke-width="3" stroke-miterlimit="10" stroke-dashoffset="7" stroke-dasharray="116.255291" />
  </g>
</svg>`;
var Zu = Object.defineProperty, Qu = Object.getOwnPropertyDescriptor, ki = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Qu(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 && Zu(e, t, i), i;
};
class bo extends k {
  constructor() {
    super(), this.label = "Loading", this.labelHidden = !1, this.size = "small", this.animationIsActive = !0, this.componentName = "loader";
  }
  updated(e) {
    e.get("size") && this.loader && (this.loader.classList.remove("loading-animation-active"), this.loader.offsetWidth, this.loader.classList.add("loading-animation-active"));
  }
  render() {
    const e = y({
      [this.theme]: !0,
      [`size-${this.size}`]: !0
    }), t = y({
      label: !!this.label,
      "sr-only": !this.label || this.labelHidden
    }), o = y({
      "loading-animation-active": !0,
      "loading-frames": this.theme !== "os",
      [`loader-box-${this.size}`]: !0
    });
    return u`
      <div class=${e}>
        <div class=${t}>${this.label}</div>
        <div class=${o}>
          ${this.theme === "os" || this.theme === "mmg" ? u`${mi(Wu)}` : Tn[this.size].map(
      (i, r) => u`<div class="${`${i}-${r}`}"></div>`
    )}
        </div>
      </div>
    `;
  }
}
bo.styles = Ku;
ki([
  M(".loading-frames")
], bo.prototype, "loader", 2);
ki([
  l({ type: String })
], bo.prototype, "label", 2);
ki([
  l({ type: Boolean })
], bo.prototype, "labelHidden", 2);
ki([
  l({ reflect: !0 })
], bo.prototype, "size", 2);
ki([
  O()
], bo.prototype, "animationIsActive", 2);
w("maui-loader", bo);
const Ju = s`
  :host {
    display: inline-block;
  }

  .pagination-dots {
    --_dot-size: 8px;

    position: relative;
    display: grid;
    width: max-content;

    justify-content: center;
  }

  .pagination-dots:not(.vertical) {
    grid-template-columns: repeat(var(--_dot-count), max-content);
  }

  .vertical {
    gap: var(--maui-spacing-3);
  }

  .dot {
    box-sizing: border-box;
    position: relative;
    width: var(--_dot-size);
    aspect-ratio: 1;
    border-radius: 99999vw;
    border: 1px solid var(--maui-color-grey-07);

    --maui-focus-radius: 99999vw;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;

    pointer-events: none;
  }

  .dot-button:hover .dot:not(.selected) {
    background-color: var(--maui-color-interaction-interactionhover);
    border-color: var(--maui-color-interaction-interactionhover);
  }

  .dot.selected {
    background-color: var(--maui-color-brand-primary);
    border-color: var(--maui-color-brand-primary);
  }

  .inverted .dot {
    border: 1px solid var(--maui-color-interaction-interaction-inverted);
    background-color: transparent;
  }

  .inverted .dot-button:hover .dot:not(.selected) {
    background-color: var(--maui-color-brand-light);
    border-color: var(--maui-color-brand-light);
  }

  .inverted .dot.selected {
    border-color: var(--maui-color-brand-light);
    background-color: var(--maui-color-brand-light);
  }

  .inverted .dot:not([disabled]):focus::after {
    --maui-focus-outline-box-shadow: var(
      --maui-focus-outline-box-shadow-inverted
    );
  }

  .dot-button {
    position: relative;
    appearance: none;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;

    --maui-focus-radius: 99999vw;
    --maui-focus-outline-offset: 0px;
  }

  .inverted .dot-button {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x, 0)