const i = this.querySelector(
          `#${e.target.getAttribute("aria-controls")}`
        );
        this.setActivePanel(i, { emitEvents: !0 });
      }
      if (o.includes(e.key)) {
        const i = e.target.id.split("-"), r = i.map((n, c) => {
          if (c !== i.length - 1)
            return n;
          const m = parseInt(n, 10), g = this.nav.querySelectorAll(".tab");
          switch (e.key) {
            case "ArrowUp":
              return m + 1 > g.length - 1 ? g.length - 1 : m + 1;
            case "ArrowRight":
              return m + 1 > g.length - 1 ? g.length - 1 : m + 1;
            case "ArrowDown":
              return m - 1 < 0 ? 0 : m - 1;
            case "ArrowLeft":
              return m - 1 < 0 ? 0 : m - 1;
            default:
              return m;
          }
        }).join("-");
        this.nav.querySelector(`#${r}`).focus();
      }
    }
  }
  handleTabFocus(e) {
    e.target.scrollIntoView({
      behavior: "smooth",
      block: "nearest"
    });
  }
  handleMouseEnter(e) {
    e.target.setAttribute("hovering", ""), this.updateIndicator();
  }
  handleMouseLeave(e) {
    e.target.removeAttribute("hovering"), this.updateIndicator();
  }
  renderTabs() {
    return u`${this.getAllPanels().map((e, t) => {
      e.setAttribute("theme", this.theme);
      const o = `maui-tab-control-tab-${this.controlId}-${t}`, i = e.hasAttribute("active");
      return e.setAttribute("aria-labelledby", o), u`<div
        role="tab"
        class=${y({
        tab: !0,
        compact: this.compactTabs,
        spread: this.spreadTabs,
        transparent: this.transparentTabs,
        "icon-only-mobile": this.iconOnlyMobile
      })}
        id=${o}
        ?active=${i}
        tabindex="0"
        aria-selected=${i}
        aria-controls=${e.id}
        @focus=${this.handleTabFocus}
        @click=${this.handleClick}
        @keydown=${this.handleKeyDown}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        ${e.icon ? u`<div class="icon">${e.icon}</div>` : ""}
        <div
          class=${y({ "label-wrapper": !0, "no-icon": !e.icon })}
        >
          <div class="label">${e.getAttribute("name")}</div>
          <div class="label font-weight-fix" aria-hidden="true">
            ${e.getAttribute("name")}
          </div>
        </div>
      </div> `;
    })}${this.spreadTabs ? "" : u`<div
          class="${y({
      tabspacer: !0,
      transparent: this.transparentTabs
    })}"
        ></div>`}`;
  }
  handleSlotChange() {
    this.setActivePanel(this.activePanel), this.setIds(), setTimeout(() => {
      this.updateIndicator();
    }, 0);
  }
  render() {
    return u`<div
      aria-busy=${this.activePanel ? "false" : "true"}
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.variant]: !0
    })}
    >
      <div class="nav-wrapper">
        <nav role="tablist">
          ${this.renderTabs()}
          <div class="indicator-wrapper">
            <span
              class="indicator"
              style=${At({
      "--maui-tab-control-indicator-offset": `${this.indicatorOffset}px`,
      "--maui-tab-control-indicator-width": `${this.indicatorWidth}px`
    })}
            ></span>
          </div>
        </nav>
      </div>
      <slot @slotchange=${this.handleSlotChange}></slot>
    </div>`;
  }
}
Ae.styles = l0;
qe([
  M("nav")
], Ae.prototype, "nav", 2);
qe([
  O()
], Ae.prototype, "activePanel", 2);
qe([
  O()
], Ae.prototype, "indicatorWidth", 2);
qe([
  O()
], Ae.prototype, "indicatorOffset", 2);
qe([
  l({ type: Number })
], Ae.prototype, "initiallyActive", 2);
qe([
  l({ type: Boolean })
], Ae.prototype, "compactTabs", 2);
qe([
  l({ type: Boolean })
], Ae.prototype, "transparentTabs", 2);
qe([
  l({ type: Boolean })
], Ae.prototype, "iconOnlyMobile", 2);
qe([
  l({ type: Boolean })
], Ae.prototype, "spreadTabs", 2);
qe([
  l({ type: String })
], Ae.prototype, "variant", 2);
qe([
  F([
    "activePanel",
    "compactTabs",
    "spreadTabs",
    "variant",
    "initiallyActive"
  ])
], Ae.prototype, "handleTabChange", 1);
w("maui-tab-control", Ae);
const u0 = s`
  ${A}

  .maui-tab-control-panel:not(.active) {
    display: none;
  }
`, m0 = [u0];
var h0 = Object.defineProperty, p0 = Object.getOwnPropertyDescriptor, Ui = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? p0(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 && h0(e, t, i), i;
};
class $o extends k {
  constructor() {
    super(), this.hasSlotController = new be(this, "icon"), this.componentName = "maui-tab-control-panel";
  }
  handleActiveChange() {
    this.setAttribute("aria-hidden", JSON.stringify(!this.active));
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "tabpanel"), this.handleActiveChange();
  }
  firstUpdated() {
    super.firstUpdated();
  }
  handleSlotChange() {
    this.hasSlotController.test("icon") && this.iconSlot?.assignedElements() && (this.icon = this.iconSlot.assignedElements()[0], this.attributeChanged());
  }
  attributeChanged() {
    this.emit("maui-update");
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      active: this.active
    })}
    >
      <slot hidden name="icon" @slotchange=${this.handleSlotChange}></slot>
      <slot></slot>
    </div>`;
  }
}
$o.styles = m0;
Ui([
  M("slot[name=icon]")
], $o.prototype, "iconSlot", 2);
Ui([
  l({ type: String, reflect: !0 })
], $o.prototype, "name", 2);
Ui([
  l({ type: Boolean, reflect: !0 })
], $o.prototype, "active", 2);
Ui([
  F("active")
], $o.prototype, "handleActiveChange", 1);
Ui([
  F("name")
], $o.prototype, "attributeChanged", 1);
w("maui-tab-control-panel", $o);
const el = (a) => {
  const e = h(a);
  return s`
    /* Label */
    .${e} .label {
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.3s ease-in-out;
      position: static;
      margin-bottom: 4px;
      ${d({ size: "copy-small", tenant: a })};
    }

    .${e}.has-value .label,
    .${e}.has-focus .label {
      transform: translateY(0);
      opacity: 1;
    }

    /* Textarea */
    .${e} textarea {
      color: var(--maui-color-text-copy);
      padding: 6px 20px 6px 10px;
      border: 2px solid var(--maui-color-grey-07);

      ${p({ size: "forms-large", tenant: a })};
    }

    .${e} textarea::placeholder {
      color: var(--maui-color-text-caption);
    }

    .${e} .optional-label {
      top: 12px;
      right: 10.5px;
      ${d({ size: "copy-small", tenant: a })};
    }

    .${e}.is-disabled textarea {
      border: 2px solid var(--maui-color-disabled-foreground);
    }

    .${e}.has-focus textarea {
      border: 2px solid var(--maui-color-interaction-interaction);
      box-shadow: 0px 0px 6px 1px var(--maui-color-interaction-interaction);
    }

    .${e}.has-value textarea {
      border: 2px solid var(--maui-color-interaction-buttonsecondary);
    }

    .${e}.has-value.has-focus textarea {
      box-shadow: 0px 0px 6px 1px var(--maui-color-interaction-interaction);
      border-color: var(--maui-color-interaction-buttonsecondary);
    }

    .${e}.has-focus .optional-label {
      visibility: hidden;
    }

    .${e} .info-wrapper {
      ${d({ size: "copy-small", tenant: a })};
    }

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

    .${e}.has-error textarea {
      border: 2px solid var(--maui-color-message-error);
    }

    .${e}.has-error.has-focus .control:focus {
      box-shadow: 0px 0px 6px 1px var(--maui-color-message-error);
      border: 2px solid var(--maui-color-message-error);
    }

    .${e}.textarea.has-error textarea::placeholder {
      color: var(--maui-color-text-caption);
    }

    .${e}.has-value .label,
    .${e}.has-focus .label {
      background-color: transparent;
    }

    .${e}.has-error .label {
      --maui-label-color-override: var(--maui-color-text-caption);
    }

    .${e}.is-disabled:not(.has-value, .has-focus) .label {
      visibility: hidden;
      transition: none;
    }
  `;
}, g0 = s`
  ${C}

  ${A}

  .textarea {
    display: flex;
    flex-direction: column;
    cursor: text;
    position: relative;
    font-family: var(--maui-font-family-copy);
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  textarea {
    font-family: var(--maui-font-family-copy);

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

  .label {
    --maui-label-color-override: var(--maui-color-text-caption);
    ${d({ size: "copy-small", tenant: "wl" })};
    position: absolute;
    background: white;
  }

  .textarea-wrapper {
    display: flex;
    position: relative;
  }

  .control {
    height: 100%;
    width: 100%;
    resize: vertical;
    outline: none;
  }

  .info-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    ${d({ size: "copy-small", tenant: "wl" })};
    margin-top: 6px;
  }

  .optional-label {
    ${d({ size: "copy-small", tenant: "wl" })};
    position: absolute;
    color: var(--maui-color-text-caption);
  }

  .info {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 75%;
  }

  .text-count {
    align-self: flex-start;
    text-align: right;
  }

  .is-disabled .label {
    opacity: 0;
    transition: none;
  }

  .has-value .label,
  .has-focus .label {
    opacity: 1;
  }

  .has-error .optional-label {
    visibility: hidden;
  }

  .textarea.is-disabled .hint {
    --maui-hint-color-override: var(--maui-color-disabled-foreground);
    cursor: not-allowed;
  }

  .textarea.is-disabled .label {
    --maui-label-color-override: var(--maui-color-disabled-foreground);
  }

  .is-disabled .textarea-wrapper textarea::placeholder,
  .is-disabled .textarea-wrapper .optional-label,
  .is-disabled .textarea-wrapper textarea,
  .is-disabled .info-wrapper .text-count {
    color: var(--maui-color-disabled-foreground);
  }

  .is-disabled textarea {
    background: inherit;
  }

  .textarea.has-error textarea::placeholder,
  .textarea.has-error textarea {
    color: var(--maui-color-message-error);
  }
`, b0 = s`
  ${el("lh")}
`, v0 = s`
  /** Label */
  .lx .label {
    top: 0.5px; /* Initial position for most browsers */
    padding-top: 9px;
    left: 10px;
    width: calc(100% - 30px);
    --maui-label-color-override: var(--maui-color-interaction-buttonsecondary);
    ${d({ size: "copy-small", tenant: "lx" })};
  }

  /*
   In most browsers, including Chrome, the label is positioned at 0.5px from the top.
   Firefox renders the layout differently, to match the design across browsers, we need to adjust the positioning specifically for Firefox.
  */

  @-moz-document url-prefix() {
    .lx .label {
      top: 1.7px; /* Firefox-specific position adjustment */
    }
  }

  .lx.has-value .label,
  .lx.has-focus .label {
    z-index: 2;
  }

  /** Textarea */
  .lx textarea {
    border: 1px solid var(--maui-color-grey-02);
    padding: 12px 10px 24px 10px;
    ${p({ size: "forms-large", tenant: "lx" })};
    color: var(--maui-color-text-copy);
  }

  .lx.has-focus textarea,
  .lx.has-value textarea {
    padding: 24px 10px 12px 10px;
  }

  .lx textarea::placeholder {
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .lx.has-error textarea {
    border: 1px solid var(--maui-color-message-error);
  }

  .lx .optional-label {
    top: 12px;
    right: 14px;
    color: var(--maui-color-interaction-buttonsecondary);
    ${d({ size: "copy-small", tenant: "lx" })};
  }

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

  /** Other Styles */

  .lx .text-count {
    color: var(--maui-color-grey-06);
  }

  .lx.has-focus {
    --maui-focus-radius: 0;
  }

  ${H(
  "textarea:not(.is-disabled)",
  "has-focus",
  "textarea-wrapper",
  "lx"
)}
`, f0 = s`
  /** Label */

  .os .label {
    left: 12px;
    width: calc(100% - 27px);
    padding-top: 5px;
    background: var(--maui-color-grey-02);
    --maui-label-color-override: var(--maui-color-grey-07);
    ${d({ size: "copy-small", tenant: "os" })};
  }

  /*
   In most browsers, including Chrome, the label is positioned at 0.5px from the top.
   Firefox renders the layout differently, to match the design across browsers, we need to adjust the positioning specifically for Firefox.

   Adjusted value for Firefox
   */
  @-moz-document url-prefix() {
    .os .label {
      top: 1px;
    }
  }

  .os .optional-label {
    color: var(--maui-color-grey-07);
    top: 12px;
    right: 12px;
    ${d({ size: "copy-small", tenant: "os" })};
  }

  .os.has-value .label,
  .os.has-focus .label {
    z-index: 2;
  }

  .os.has-focus {
    border: 1px;
  }

  /** Textarea */
  .os.textarea {
    color: var(--maui-color-grey-07);
  }

  .os textarea {
    background: var(--maui-color-grey-02);
    border: none;
    padding: 12px 12px 24px 12px;
    border-radius: 3px;
    ${p({ size: "forms-large", tenant: "os" })};
  }

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

  .os.has-focus textarea,
  .os.has-value textarea {
    padding: 24px 12px 12px 12px;
  }

  .os textarea::placeholder {
    color: var(--maui-color-grey-07);
  }

  /** Other Styles */
  .os .text-count {
    color: var(--maui-color-grey-07);
  }

  .os.is-disabled textarea {
    background: var(--maui-color-disabled-background);
    border: none;
  }

  .os.has-focus {
    --maui-focus-radius: 0;
  }

  ${H(
  "textarea:not(.is-disabled)",
  "has-focus",
  "textarea-wrapper",
  "os"
)}
`, y0 = s`
  /** Label */
  .sn .label {
    top: 0.5px;
    left: 1px;
    padding: 6px 9px 0 9px;
    width: calc(100% - 25px);
    ${d({ size: "copy-small", tenant: "sn" })};
  }

  /*
   In most browsers, including Chrome, the label is positioned at 0.5px from the top.
   Firefox renders the layout differently, to match the design across browsers, we need to adjust the positioning specifically for Firefox.

   Adjusted value for Firefox
   */
  @-moz-document url-prefix() {
    .sn .label {
      top: 2px;
    }
  }

  .sn .optional-label {
    top: 12px;
    right: 14px;
    ${d({ size: "copy-small", tenant: "sn" })};
  }

  .sn.has-value .label,
  .sn.has-focus .label {
    z-index: 2;
  }

  /** Textarea */
  .sn textarea {
    border: 1px solid var(--maui-color-grey-07);
    padding: 12px 12px 24px 12px;
    ${p({ size: "forms-large", tenant: "sn" })};

    color: var(--maui-color-text-copy);
  }

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

  .sn textarea::placeholder {
    color: var(--maui-color-grey-07);
  }

  .sn.has-focus textarea,
  .sn.has-value textarea {
    padding: 24px 10px 12px 10px;
  }

  /** Other Styles */
  .sn .text-count {
    color: var(--maui-color-grey-07);
  }

  .sn.has-focus {
    --maui-focus-radius: 0;
    --maui-focus-outline-offset: 6px;
  }

  ${H(
  "textarea:not(.is-disabled)",
  "has-focus",
  "textarea-wrapper",
  "sn"
)}
`, x0 = s`
  ${el("b2b")}
`, $0 = s`
  /** Label */

  .four_y .label {
    left: 12px;
    width: calc(100% - 27px);
    padding-top: 9px;
    background: var(--maui-color-grey-02);
    --maui-label-color-override: var(--maui-color-text-label);
  }

  /*
   In most browsers, including Chrome, the label is positioned at 0.5px from the top.
   Firefox renders the layout differently, to match the design across browsers, we need to adjust the positioning specifically for Firefox.

   Adjusted value for Firefox
   */
  @-moz-document url-prefix() {
    .four_y .label {
      top: 1px;
    }
  }

  .four_y .optional-label {
    color: var(--maui-color-text-caption);
    top: 12px;
    right: 12px;
    ${p({ size: "forms-small", tenant: "four_y" })};
  }

  .four_y.has-value .label,
  .four_y.has-focus .label {
    z-index: 2;
  }

  .four_y.has-focus {
    border: 1px;
  }

  /** Textarea */
  .four_y textarea {
    color: var(--maui-color-text-copy);
  }
  .four_y textarea::placeholder {
    color: var(--maui-color-text-copy);
  }

  .four_y textarea {
    background: var(--maui-color-grey-02);
    border: none;
    padding: 12px 12px 24px 12px;
    border-radius: var(--maui-radii-default-radius);
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

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

  .four_y.has-focus textarea,
  .four_y.has-value textarea {
    padding: 24px 12px 12px 12px;
  }

  .four_y
    textarea:not(.is-disabled)
    .four_y
    textarea:not(.is-disabled)::placeholder,
  .four_y:not(.is-disabled).has-error textarea::placeholder,
  .four_y:not(.is-disabled).has-error.has-value textarea {
    color: var(--maui-color-text-copy);
    caret-color: var(--maui-color-text-copy);
  }

  .four_y.is-disabled.has-error textarea::placeholder,
  .four_yis-disabled.has-error.has-value textarea {
    color: var(--maui-color-disabled-foreground);
  }

  .four_y.has-error .label,
  .four_y.has-error textarea {
    background-color: var(--maui-color-message-bg-error);
  }

  /** Other Styles */
  .four_y .text-count {
    color: var(--maui-color-text-caption);
  }

  .four_y.is-disabled textarea {
    background: var(--maui-color-disabled-background);
    border: none;
  }

  .four_y.is-disabled .label {
    background: var(--maui-color-disabled-background);
  }

  .four_y.has-focus {
    --maui-focus-outline-offset: 3px;
    --maui-focus-radius: calc(
      var(--maui-radii-default-radius) + var(--maui-radii-focus-offset)
    );
  }

  .four_y.has-error.has-focus {
    --maui-focus-outline-box-shadow: 0 0 0 1px var(--maui-color-message-error);
  }

  ${H(
  "textarea:not(.is-disabled)",
  "has-focus",
  "textarea-wrapper",
  "four_y"
)}
`, w0 = s`
  /** Label */

  .mmg .label {
    left: 12px;
    padding-top: 5px;
    background: var(--maui-color-grey-02);
    --maui-label-color-override: var(--maui-color-grey-07);
    ${d({ size: "copy-small", tenant: "mmg" })};
  }

  /*
   In most browsers, including Chrome, the label is positioned at 0.5px from the top.
   Firefox renders the layout differently, to match the design across browsers, we need to adjust the positioning specifically for Firefox.

   Adjusted value for Firefox
   */
  @-moz-document url-prefix() {
    .mmg .label {
      top: 1px;
    }
  }

  .mmg.has-focus .label,
  .mmg.has-value .label {
    top: unset;
    bottom: 100%;
    left: 0;
    padding-block: 0 5px;
    background-color: transparent;
  }

  .mmg .optional-label {
    color: var(--maui-color-text-caption);
    top: 12px;
    right: 12px;
    ${d({ size: "copy-small", tenant: "mmg" })};
  }

  .mmg.has-value .label,
  .mmg.has-focus .label {
    z-index: 2;
  }

  .mmg.has-focus {
    border: 1px;
  }

  /** Textarea */
  .mmg.textarea {
    color: var(--maui-color-text-caption);
  }

  .mmg.has-focus .textarea-wrapper:after {
    display: none;
  }

  .mmg textarea {
    background: var(--maui-color-brand-light);
    border: var(--maui-spacing-0) solid var(--maui-color-grey-07);
    border-radius: var(--maui-radii-default-radius);
    color: var(--maui-color-text-copy);
    padding: 6px 20px 6px 10px;
    ${p({ size: "forms-large", tenant: "mmg" })};
  }

  .mmg.has-focus textarea,
  .mmg.has-value textarea,
  .mmg textarea:required {
    border-color: var(--maui-color-interaction-interaction);
  }

  .mmg.has-error textarea {
    border-color: var(--maui-color-message-error);
    color: var(--maui-color-message-error);
  }

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

  .mmg textarea::placeholder,
  .mmg.has-error textarea::placeholder {
    color: var(--maui-color-text-caption);
  }

  /** Other Styles */
  .mmg .text-count {
    color: var(--maui-color-text-caption);
  }

  .mmg.is-disabled textarea {
    background: transparent;
    border-color: var(--maui-color-disabled-foreground);
    color: var(--maui-color-disabled-foreground);
  }

  .mmg.has-focus {
    --maui-focus-radius: 2;
  }

  ${H(
  "textarea:not(.is-disabled)",
  "has-focus",
  "textarea-wrapper",
  "mmg"
)}
`, _0 = [
  g0,
  b0,
  v0,
  f0,
  y0,
  x0,
  $0,
  w0
];
var k0 = Object.defineProperty, S0 = Object.getOwnPropertyDescriptor, j = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? S0(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 && k0(e, t, i), i;
};
const Y = class tr extends Te {
  constructor() {
    super(), this.formControlController = new tt(this), this.hasSlotController = new be(
      this,
      ...tr.slots
    ), this.characterCount = "", this.value = "", this.label = "", this.placeholder = "", this.hint = "", this.disabled = !1, this.displayCounter = !1, this.invalid = !1, this.rows = 4, this.resize = "vertical", this.readonly = !1, this.componentName = "textarea";
  }
  updateCharacterCount() {
    this.characterCount = `${this.value.length}/${this.maxlength}`;
  }
  updated(e) {
    (e.has("maxlength") || e.has("value")) && this.updateCharacterCount();
  }
  /** Gets the validity state object */
  get validity() {
    return this.input.validity;
  }
  /** Gets the validation message */
  get validationMessage() {
    return this.input.validationMessage;
  }
  firstUpdated() {
    super.firstUpdated(), this.formControlController.updateValidity(), this.customErrorMessage = this.errorMessage;
  }
  validateTextLength(e) {
    const t = e.length, o = "Text is below the minimum length.", i = "Text length exceeds the maximum limit.";
    if (t > this.maxlength) {
      this.errorMessage = i, this.hasError = !0;
      return;
    }
    if (t < this.minlength) {
      this.errorMessage = o, this.hasError = !0;
      return;
    }
    this.errorMessage = this.customErrorMessage, this.hasError = !!this.errorMessage;
  }
  handleInput(e) {
    xt(this, "maui-input");
    const t = e.target, { value: o } = t;
    (this.minlength || this.maxlength) && this.validateTextLength(o), this.value = this.control.value;
  }
  handleInvalid() {
    this.invalid = !0;
  }
  handleChange() {
    this.value = this.control.value, xt(this, "maui-change");
  }
  focus(e) {
    super.handleFocus(), this.control.focus(e);
  }
  blur() {
    super.handleBlur(), this.control.blur();
  }
  render() {
    const e = this.id || "defaultTextareaID", t = this.hasSlotController.test("hint"), o = !!this.hint, i = this.hasSlotController.test("error"), { hasError: r } = this, n = !!t || !!o || !!r || !!i;
    let c;
    i ? c = u`<slot id="${e}-error" name="error"
        >Error Slot</slot
      >` : r && (c = u`<maui-error-highlight
        .theme=${this.theme}
        id="${e}-error"
        class="error"
        >${this.errorMessage}</maui-error-highlight
      >`);
    const m = this.label || "default label";
    return this.placeholder = m, u`
      <div
        class=${y({
      textarea: !0,
      [this.theme]: !0,
      ..._s({
        baseClass: this.componentName,
        slots: tr.slots,
        hasSlotController: this.hasSlotController
      }),
      "is-disabled": this.disabled,
      "has-value": this.value,
      "has-error": r,
      "has-focus": this.hasFocus
    })}
      >
        <maui-label
          .theme=${this.theme}
          id="${e}-label"
          class="label"
          for=${e}
          tabindex="-1"
          >${m}</maui-label
        >
        <div class="textarea-wrapper">
          <textarea
            id="${e}"
            class="control validation-input"
            name=${U(this.name)}
            .value=${Ji(this.value)}
            ?disabled=${this.disabled}
            ?required=${this.required}
            placeholder=${this.hasFocus ? "" : this.label}
            minlength=${U(this.minlength)}
            pattern=${U(this.pattern)}
            rows=${this.rows}
            resize=${this.resize}
            ?readonly=${this.readonly}
            autocapitalize=${U(this.autocapitalize)}
            autocorrect=${U(this.autocorrect)}
            autocomplete=${U(this.autocomplete)}
            ?autofocus=${this.autofocus}
            spellcheck=${U(this.spellcheck)}
            aria-labelledby="${e}-label"
            @change=${this.handleChange}
            @input=${this.handleInput}
            @invalid=${this.handleInvalid}
          ></textarea>
          ${!this.required && !this.value && !this.hasFocus ? u`<div class="optional-label">${this.optional}</div>` : ""}
        </div>
        ${n || this.displayCounter && this.maxlength !== void 0 ? u`<div class="info-wrapper">
              ${n ? u`
                    <div class="info">
                      <div
                        aria-live="polite"
                        aria-relevant="additions"
                        aria-atomic="true"
                      >
                        ${c}
                      </div>
                      ${(o || t) && !r && !i ? u`<div id="${e}-hint" class="hint">
                            ${t ? u`<slot name="hint"></slot>` : u`<maui-hint
                                  .theme=${this.theme}
                                  class="hint"
                                >
                                  ${this.hint}
                                </maui-hint>`}
                          </div>` : ""}
                    </div>
                  ` : u`<div class="info"></div>`}
              ${this.displayCounter && this.maxlength !== void 0 ? u`<div class="text-count">${this.characterCount}</div>` : u``}
            </div>` : ""}
      </div>
    `;
  }
};
Y.styles = _0;
Y.slots = ["hint", "error"];
j([
  O()
], Y.prototype, "characterCount", 2);
j([
  M(".validation-input")
], Y.prototype, "control", 2);
j([
  l()
], Y.prototype, "name", 2);
j([
  l()
], Y.prototype, "value", 2);
j([
  l()
], Y.prototype, "label", 2);
j([
  l({ type: String, reflect: !0 })
], Y.prototype, "optional", 2);
j([
  l()
], Y.prototype, "placeholder", 2);
j([
  l()
], Y.prototype, "hint", 2);
j([
  l({ type: Boolean, reflect: !0 })
], Y.prototype, "disabled", 2);
j([
  l({ type: Boolean })
], Y.prototype, "displayCounter", 2);
j([
  l({ type: Number })
], Y.prototype, "minlength", 2);
j([
  l({ type: Number })
], Y.prototype, "maxlength", 2);
j([
  l()
], Y.prototype, "pattern", 2);
j([
  l({ type: Boolean, reflect: !0 })
], Y.prototype, "invalid", 2);
j([
  l()
], Y.prototype, "rows", 2);
j([
  l()
], Y.prototype, "resize", 2);
j([
  l({ type: Boolean, reflect: !0 })
], Y.prototype, "readonly", 2);
j([
  l()
], Y.prototype, "autocapitalize", 2);
j([
  l()
], Y.prototype, "autocorrect", 2);
j([
  l()
], Y.prototype, "autocomplete", 2);
j([
  l({ type: Boolean })
], Y.prototype, "autofocus", 2);
j([
  l({
    type: Boolean
  })
], Y.prototype, "spellcheck", 2);
let O0 = Y;
w("maui-textarea", O0);
const M0 = s`
  .flight-detail {
    display: grid;
  }

  .main {
    display: grid;
    gap: var(--maui-spacing-4);
  }

  maui-divider {
    --maui-divider-spacing-override: var(--maui-spacing-4);
  }
`, L0 = [M0];
var B0 = Object.defineProperty, C0 = Object.getOwnPropertyDescriptor, tl = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? C0(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 && B0(e, t, i), i;
};
const Ri = class ol extends k {
  constructor() {
    super(), this.hasSlotController = new be(
      this,
      ...ol.slots
    ), this.spacings = !1, this.hideHeaderDivider = !1, this.componentName = "flight-detail";
  }
  handleSlotChange(e) {
    const t = e.target;
    t.name === "header" && X(t, ["MAUI-FLIGHT-DETAIL-HEADER"], 1, !0), t.name === "flight-display" && X(
      t,
      ["MAUI-FLIGHT-DISPLAY", "MAUI-FLIGHT-DETAIL-STATUS"],
      2,
      !0
    ), t.name === "times" && X(t, ["MAUI-FLIGHT-DETAIL-TIMES"], 1, !0), t.name === "status" && X(t, ["MAUI-FLIGHT-DETAIL-STATUS"], 1, !0), t.name === "gates" && X(t, ["MAUI-FLIGHT-DETAIL-GATES"], 1, !0);
  }
  render() {
    const [e, t] = ["gates", "additional"].map(
      (o) => this.hasSlotController.test(o)
    );
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <maui-padding-container
        .theme=${this.theme}
        padding="${this.spacings ? "4" : "0"}"
        paddingBottom=${this.hideHeaderDivider ? "4" : "99"}
      >
        <slot name="header"></slot
      ></maui-padding-container>
      ${this.hideHeaderDivider ? "" : u`<maui-divider .theme=${this.theme}></maui-divider>`}
      <maui-padding-container
        .theme=${this.theme}
        paddingInline=${this.spacings ? "4" : "0"}
        paddingTop=${this.hideHeaderDivider ? "4" : "99"}
        ><div class="main">
          <div>
            <slot
              name="flight-display"
              @slotchange=${this.handleSlotChange}
            ></slot>
            <slot name="status"></slot>
          </div>
          <slot name="times"></slot></div
      ></maui-padding-container>
      ${e ? u`<maui-divider .theme=${this.theme}></maui-divider>` : ""}
      <maui-padding-container
        .theme=${this.theme}
        paddingInline=${this.spacings ? "4" : "0"}
        ><slot name="gates"></slot
      ></maui-padding-container>
      ${t ? u`<maui-divider .theme=${this.theme}></maui-divider>` : ""}
      <maui-padding-container
        .theme=${this.theme}
        padding=${this.spacings ? "4" : "0"}
        paddingTop="99"
        ><slot name="additional"></slot
      ></maui-padding-container>
    </div>`;
  }
};
Ri.styles = L0;
Ri.slots = [
  "header",
  "flight-display",
  "times",
  "status",
  "gates",
  "additional"
];
tl([
  l({ type: Boolean })
], Ri.prototype, "spacings", 2);
tl([
  l({ type: Boolean })
], Ri.prototype, "hideHeaderDivider", 2);
let z0 = Ri;
w("maui-flight-detail", z0);
const A0 = s`
  ${A}

  .wrapper {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--maui-spacing-4);
  }

  .left,
  .right {
    display: grid;
    gap: var(--maui-spacing-2);
    align-content: start;
  }

  .right {
    justify-items: end;
  }

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

  .date {
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
  }

  .info {
    display: grid;
    justify-items: end;
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-caption);
    gap: var(--maui-spacing-1);
  }

  .multistop {
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
  }

  .operator,
  .codeshare {
    text-align: right;
  }
`, F0 = s`
  .os .info {
    color: var(--maui-color-grey-07);
  }

  .os .date,
  .os .info,
  .os .multistop {
    ${d({ size: "copy-medium", tenant: "os" })};
  }
`, N0 = s`
  .lh .date,
  .lh .info,
  .lh .multistop {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, I0 = s`
  .sn .date,
  .sn .info,
  .sn .multistop {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, U0 = s`
  .lx .date,
  .lx .info,
  .lx .multistop {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, R0 = s`
  .b2b .date,
  .b2b .info,
  .b2b .multistop {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }
`, D0 = s`
  .four_y .date,
  .four_y .info,
  .four_y .multistop {
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }
`, E0 = s`
  .mmg .date,
  .mmg .info,
  .mmg .multistop {
    ${d({ size: "copy-medium", tenant: "mmg" })};
  }
`, P0 = [
  A0,
  N0,
  U0,
  F0,
  I0,
  R0,
  D0,
  E0
];
var H0 = Object.defineProperty, G0 = Object.getOwnPropertyDescriptor, wo = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? G0(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 && H0(e, t, i), i;
};
class Ot extends k {
  constructor() {
    super(), this.componentName = "flight-detail-header";
  }
  connectedCallback() {
    super.connectedCallback(), this.hasAttribute("slot") || this.setAttribute("slot", "header");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <div class="wrapper">
        <div class="left">
          ${this.date ? u`<div class="date">
                ${eb(le(new Date(this.date)), {
      locale: this.locale
    })}
              </div>` : ""}
          ${this.travelClass && this.travelClassLabel ? u`<div class="travel-class">
                <maui-badge
                  .preset=${this.travelClass}
                  .value=${this.travelClassLabel}
                  size="small"
                  .theme=${this.theme}
                ></maui-badge>
              </div>` : ""}
        </div>
        <div class="right">
          ${this.multiStopLabel ? u`<div class="multistop">${this.multiStopLabel}</div>` : u`<slot name="flightnumber"></slot>`}
          ${this.operatorInfo || this.codeShareInfo ? u`<div class="info">
                ${this.operatorInfo ? u`<div class="operator">${this.operatorInfo}</div>` : ""}
                ${this.codeShareInfo ? u`<div class="codeshare">${this.codeShareInfo}</div>` : ""}
              </div>` : ""}
        </div>
      </div>
    </div>`;
  }
}
Ot.styles = P0;
wo([
  l({ type: String })
], Ot.prototype, "date", 2);
wo([
  l({ type: String })
], Ot.prototype, "locale", 2);
wo([
  l({ type: String })
], Ot.prototype, "travelClass", 2);
wo([
  l({ type: String })
], Ot.prototype, "travelClassLabel", 2);
wo([
  l({ type: String })
], Ot.prototype, "operatorInfo", 2);
wo([
  l({ type: String })
], Ot.prototype, "codeShareInfo", 2);
wo([
  l({ type: String })
], Ot.prototype, "multiStopLabel", 2);
w("maui-flight-detail-header", Ot);
const Y0 = s`
  ${A}

  .flight-detail-status {
    display: grid;
    place-content: center;
    gap: var(--maui-spacing-1);
    text-align: center;

    ${d({ size: "copy-medium", tenant: "wl" })};
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
  }

  .flight-status,
  .booking-status {
    font-weight: var(--maui-font-weight-bold);
  }

  .error {
    color: var(--maui-color-display-delayed);
  }

  .success {
    color: var(--maui-color-display-ontime);
  }
`, T0 = s`
  .lh.flight-detail-status {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, X0 = s`
  .lx.flight-detail-status {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, V0 = s`
  .os.flight-detail-status {
    ${d({ size: "copy-medium", tenant: "os" })};
  }
`, j0 = s`
  .sn.flight-detail-status {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, q0 = s`
  .b2b.flight-detail-status {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }
`, K0 = s`
  .four_y.flight-detail-status {
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }
`, W0 = [
  Y0,
  T0,
  X0,
  V0,
  j0,
  q0,
  K0
];
var Z0 = Object.defineProperty, Q0 = Object.getOwnPropertyDescriptor, Di = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Q0(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 && Z0(e, t, i), i;
};
class _o extends k {
  constructor() {
    super(), this.duration = "", this.bookingStatus = "default", this.bookingStatusLabel = "", this.flightStatus = "default", this.flightStatusLabel = "", this.componentName = "flight-detail-status";
  }
  connectedCallback() {
    super.connectedCallback(), this.hasAttribute("slot") || this.setAttribute("slot", "status");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      ${this.duration ? u`<div class="duration">${this.duration}</div>` : ""}
      ${this.bookingStatus && this.bookingStatusLabel ? u`<div class="booking-status ${this.bookingStatus}">
            ${this.bookingStatusLabel}
          </div>` : ""}
      ${this.flightStatus && this.flightStatusLabel ? u`<div class="flight-status ${this.flightStatus}">
            ${this.flightStatusLabel}
          </div>` : ""}
    </div>`;
  }
}
_o.styles = W0;
Di([
  l({ type: String })
], _o.prototype, "duration", 2);
Di([
  l({ type: String })
], _o.prototype, "bookingStatus", 2);
Di([
  l({ type: String })
], _o.prototype, "bookingStatusLabel", 2);
Di([
  l({ type: String })
], _o.prototype, "flightStatus", 2);
Di([
  l({ type: String })
], _o.prototype, "flightStatusLabel", 2);
w("maui-flight-detail-status", _o);
const J0 = s`
  .wrapper {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
  }

  .origin,
  .destination {
    display: grid;
    gap: var(--maui-spacing-3);
  }

  .destination {
    justify-items: end;
  }

  .time.old {
    text-decoration: line-through;
  }
`, e1 = [J0];
var t1 = Object.defineProperty, o1 = Object.getOwnPropertyDescriptor, Pe = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? o1(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 && t1(e, t, i), i;
};
class Oe extends k {
  constructor() {
    super(), this.departureTime = "", this.statusOrigin = "scheduled", this.labelOrigin = "", this.newDepartureTime = "", this.newStatusOrigin = "scheduled", this.newLabelOrigin = "", this.arrivalTime = "", this.statusDestination = "scheduled", this.labelDestination = "", this.newArrivalTime = "", this.newStatusDestination = "scheduled", this.newLabelDestination = "", this.componentName = "flight-detail-times";
  }
  connectedCallback() {
    super.connectedCallback(), this.hasAttribute("slot") || this.setAttribute("slot", "times");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <div class="wrapper">
        <div class="origin">
          ${this.newDepartureTime && this.newStatusOrigin && this.newLabelOrigin ? u`<maui-flight-detail-value
                .theme=${this.theme}
                value=${this.newDepartureTime}
                status=${this.newStatusOrigin}
                label=${this.newLabelOrigin}
              ></maui-flight-detail-value>` : ""}
          <maui-flight-detail-value
            .theme=${this.theme}
            value=${this.departureTime}
            status=${this.statusOrigin}
            label=${this.labelOrigin}
          ></maui-flight-detail-value>
        </div>
        <div class="destination">
          ${this.newArrivalTime && this.newStatusDestination && this.newLabelDestination ? u`<maui-flight-detail-value
                .theme=${this.theme}
                alignment="right"
                value=${this.newArrivalTime}
                status=${this.newStatusDestination}
                label=${this.newLabelDestination}
              ></maui-flight-detail-value>` : ""}
          <maui-flight-detail-value
            .theme=${this.theme}
            alignment="right"
            value=${this.arrivalTime}
            status=${this.statusDestination}
            label=${this.labelDestination}
          ></maui-flight-detail-value>
        </div>
      </div>
    </div>`;
  }
}
Oe.styles = e1;
Pe([
  l({ type: String })
], Oe.prototype, "departureTime", 2);
Pe([
  l({ type: String })
], Oe.prototype, "statusOrigin", 2);
Pe([
  l({ type: String })
], Oe.prototype, "labelOrigin", 2);
Pe([
  l({ type: String })
], Oe.prototype, "newDepartureTime", 2);
Pe([
  l({ type: String })
], Oe.prototype, "newStatusOrigin", 2);
Pe([
  l({ type: String })
], Oe.prototype, "newLabelOrigin", 2);
Pe([
  l({ type: String })
], Oe.prototype, "arrivalTime", 2);
Pe([
  l({ type: String })
], Oe.prototype, "statusDestination", 2);
Pe([
  l({ type: String })
], Oe.prototype, "labelDestination", 2);
Pe([
  l({ type: String })
], Oe.prototype, "newArrivalTime", 2);
Pe([
  l({ type: String })
], Oe.prototype, "newStatusDestination", 2);
Pe([
  l({ type: String })
], Oe.prototype, "newLabelDestination", 2);
w("maui-flight-detail-times", Oe);
const i1 = s`
  ${A}

  .flight-detail-value {
    display: grid;
  }

  .flight-detail-value.left {
    justify-items: start;
  }

  .flight-detail-value.right {
    justify-items: end;
  }

  .value {
    ${d({ size: "copy-medium", tenant: "wl" })};
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-color-text-copy);
  }

  .label {
    ${d({ size: "copy-medium", tenant: "wl" })};
    color: var(--maui-color-text-caption);
    font-family: var(--maui-font-family-copy);
  }

  .onTime .label,
  .onTime .value {
    color: var(--maui-color-display-ontime);
  }

  .delayed .label,
  .delayed .value {
    color: var(--maui-color-display-delayed);
  }
`, a1 = s`
  .os.scheduled .label {
    color: var(--maui-color-grey-07);
  }

  .os.estimated .label {
    color: var(--maui-color-text-copy);
  }

  .os .value {
    ${b({ size: "h5", tenant: "os" }).mobile};
  }

  .os .label {
    ${d({ size: "copy-medium", tenant: "os" })};
  }
`, r1 = s`
  .lh .value {
    ${d({ size: "copy-large", tenant: "lh" })};
  }
  .lh .label {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, n1 = s`
  .lx .value,
  .lx .label {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, s1 = s`
  .sn .value,
  .sn .label {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, l1 = s`
  .b2b .value,
  .b2b .label {
    ${d({ size: "copy-large", tenant: "b2b" })};
  }
`, c1 = s`
  .four_y .label {
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }
  .four_y .value {
    ${d({ size: "copy-large", tenant: "four_y" })};
    font-weight: var(--maui-font-weight-bold);
  }
`, d1 = s`
  .mmg .label {
    ${d({ size: "copy-medium", tenant: "mmg" })};
  }
  .mmg .value {
    ${d({ size: "copy-large", tenant: "mmg" })};
    font-weight: var(--maui-font-weight-bold);
  }
`, u1 = [
  i1,
  r1,
  a1,
  n1,
  s1,
  l1,
  c1,
  d1
];
var m1 = Object.defineProperty, h1 = Object.getOwnPropertyDescriptor, La = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? h1(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 && m1(e, t, i), i;
};
class qo extends k {
  constructor() {
    super(), this.alignment = "left", this.status = "scheduled", this.componentName = "flight-detail-value";
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.alignment]: !0,
      [this.status]: !0
    })}
    >
      <span class="label">${this.label}</span>
      <span class="value">${this.value}</span>
    </div>`;
  }
}
qo.styles = u1;
La([
  l({ type: String })
], qo.prototype, "value", 2);
La([
  l({ type: String })
], qo.prototype, "label", 2);
La([
  l({ type: String })
], qo.prototype, "alignment", 2);
La([
  l({ type: String })
], qo.prototype, "status", 2);
w("maui-flight-detail-value", qo);
const p1 = s`
  .wrapper {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
  }

  .origin,
  .destination {
    display: grid;
    gap: var(--maui-spacing-3);
  }

  .destination {
    justify-items: end;
  }

  .more {
    display: grid;
    gap: var(--maui-spacing-3);
  }

  .more.hidden {
    display: none;
  }
`, g1 = [p1];
var b1 = Object.defineProperty, v1 = Object.getOwnPropertyDescriptor, Ko = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? v1(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 && b1(e, t, i), i;
};
const Mt = class il extends k {
  constructor() {
    super(), this.hasSlotController = new be(
      this,
      ...il.slots
    ), this.terminalLabel = "Terminal", this.gateLabel = "Gate", this.originTerminal = "", this.originGate = "", this.destinationTerminal = "", this.destinationGate = "", this.componentName = "flight-detail-gates";
  }
  connectedCallback() {
    super.connectedCallback(), this.hasAttribute("slot") || this.setAttribute("slot", "gates");
  }
  handleSlotChange(e) {
    const t = e.target;
    X(t, ["MAUI-FLIGHT-DETAIL-VALUE"], void 0, !0);
    const o = t.name;
    t.assignedElements({ flatten: !0 }).forEach((r) => {
      r.setAttribute(
        "alignment",
        o === "origin" ? "left" : "right"
      );
    });
  }
  render() {
    const e = this.hasSlotController.test("origin"), t = this.hasSlotController.test("destination");
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <div class="wrapper">
        <div class="origin">
          ${this.originTerminal ? u`<maui-flight-detail-value
                .theme=${this.theme}
                .value=${this.originTerminal}
                .label=${this.terminalLabel}
              ></maui-flight-detail-value>` : ""}
          ${this.originGate ? u`<maui-flight-detail-value
                .theme=${this.theme}
                .value=${this.originGate}
                .label=${this.gateLabel}
              ></maui-flight-detail-value>` : ""}
          <div class="more${e ? "" : " hidden"}">
            <slot name="origin" @slotchange=${this.handleSlotChange}></slot>
          </div>
        </div>
        <div class="destination">
          ${this.destinationTerminal ? u`<maui-flight-detail-value
                .theme=${this.theme}
                alignment="right"
                .value=${this.destinationTerminal}
                .label=${this.terminalLabel}
              ></maui-flight-detail-value>` : ""}
          ${this.destinationGate ? u` <maui-flight-detail-value
                .theme=${this.theme}
                alignment="right"
                .value=${this.destinationGate}
                .label=${this.gateLabel}
              ></maui-flight-detail-value>` : ""}
          <div class="more${t ? "" : " hidden"}">
            <slot
              name="destination"
              @slotchange=${this.handleSlotChange}
            ></slot>
          </div>
        </div>
      </div>
    </div>`;
  }
};
Mt.styles = g1;
Mt.slots = ["origin", "destination"];
Ko([
  l({ type: String })
], Mt.prototype, "terminalLabel", 2);
Ko([
  l({ type: String })
], Mt.prototype, "gateLabel", 2);
Ko([
  l({ type: String })
], Mt.prototype, "originTerminal", 2);
Ko([
  l({ type: String })
], Mt.prototype, "originGate", 2);
Ko([
  l({ type: String })
], Mt.prototype, "destinationTerminal", 2);
Ko([
  l({ type: String })
], Mt.prototype, "destinationGate", 2);
let f1 = Mt;
w("maui-flight-detail-gates", f1);
const y1 = s`
  ${A};

  .flight-detail-additional {
    display: grid;
    place-content: center;
    gap: var(--maui-spacing-1);
    text-align: center;
    ${d({ size: "copy-small", tenant: "wl" })};
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
  }

  .flight-status,
  .booking-status {
    font-weight: var(--maui-font-weight-bold);
  }

  .error {
    color: var(--maui-color-display-delayed);
  }

  .success {
    color: var(--maui-color-display-ontime);
  }
`, x1 = s`
  .lh.flight-detail-additional {
    ${d({ size: "copy-small", tenant: "lh" })};
  }
`, $1 = s`
  .lx.flight-detail-additional {
    ${d({ size: "copy-small", tenant: "lx" })};
  }
`, w1 = s`
  .os.flight-detail-additional {
    ${d({ size: "copy-small", tenant: "os" })};
  }
`, _1 = s`
  .sn.flight-detail-additional {
    ${d({ size: "copy-small", tenant: "sn" })};
  }
`, k1 = s`
  .b2b.flight-detail-additional {
    ${d({ size: "copy-small", tenant: "b2b" })};
  }
`, S1 = [y1, x1, $1, w1, _1, k1];
class al extends k {
  constructor() {
    super(), this.componentName = "flight-detail-additional";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("slot", "additional");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <slot></slot>
    </div>`;
  }
}
al.styles = S1;
w(
  "maui-flight-detail-additional",
  al
);
const O1 = s`
  .table {
    --maui-table-shadow-color: var(--maui-color-brand-black-transparent);
  }

  .table.auto-height .table-overflow {
    height: auto;
    max-height: none;
  }

  .table.auto-width .table-overflow {
    width: fit-content;
  }

  .table-overflow {
    width: 100%;
    overflow: auto;
    max-height: 98vh;
    position: relative;
  }

  .clipping-wrapper {
    position: relative;
  }

  .clipping {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 3;
    transition: box-shadow 0.4s ease-in-out;
    box-shadow: inset 0 0 0 0 #0000;
  }

  .clipping.right {
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
  }

  .clipping.right.visible::after {
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    right: 0;
    height: 100%;
    box-shadow: inset -10px 0px 11px -10px var(--maui-table-shadow-color);
    opacity: 0.5;
  }

  .clipping.bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
  }

  .clipping.bottom.visible::after {
    content: '';
    position: absolute;
    display: block;
    height: 70px;
    width: 100%;
    bottom: 0;
    box-shadow: inset 0px -10px 11px -10px var(--maui-table-shadow-color);
    opacity: 0.5;
  }

  .table-wrapper {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }

  .equalColumns .table-wrapper {
    table-layout: fixed;
  }

  slot[name='footnotes'] {
    display: grid;
    margin-top: var(--maui-spacing-4);
    position: sticky;
    left: 0;
    z-index: 1;
    row-gap: var(--maui-spacing-3);
  }

  ::slotted(maui-table-head) {
    display: table-header-group;
  }

  ::slotted(maui-table-body) {
    display: table-row-group;
  }

  ::slotted(maui-table-footer) {
    display: table-footer-group;
  }

  ::slotted(maui-table-caption) {
    min-width: 50%;
    position: sticky;
    left: 0;
    z-index: 1;
    margin-bottom: var(--maui-spacing-3);
    display: block;
  }
`, M1 = s`
  .os.table {
    --maui-table-shadow-color: var(--maui-color-brand-osgrey8-transparent);
  }
`, L1 = s`
  .lx.table {
    --maui-table-shadow-color: var(--maui-color-brand-black-transparent);
  }
`, B1 = s`
  .sn.table {
    --maui-table-shadow-color: var(--maui-color-brand-sn-blue-4-transparent);
  }
`, C1 = s`
  .four_y.table {
    --maui-table-shadow-color: var(--maui-color-brand-black-transparent);
  }
`, z1 = [O1, M1, L1, B1, C1];
var A1 = Object.defineProperty, F1 = Object.getOwnPropertyDescriptor, xe = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? F1(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 && A1(e, t, i), i;
};
class ne extends k {
  constructor() {
    super(), this.footnotes = [], this.overflowing = 0, this.scrollLeft = 0, this.scrollWidth = 0, this.scrollTop = 0, this.scrollHeight = 0, this.firstColHeader = !1, this.equalColumns = !1, this.autoHeight = !1, this.autoWidth = !1, this.componentName = "table";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "table");
  }
  checkCaption(e) {
    const t = e.find(
      (o) => o.nodeName === "MAUI-TABLE-CAPTION"
    );
    t && (this.setAttribute(
      "aria-describedby",
      t.id
    ), t.setAttribute("theme", `${this.theme}`));
  }
  setRowIndex(e) {
    const t = e.find(
      (f) => f.nodeName === "MAUI-TABLE-HEAD"
    ), o = e.find(
      (f) => f.nodeName === "MAUI-TABLE-BODY"
    ), i = e.find(
      (f) => f.nodeName === "MAUI-TABLE-FOOTER"
    );
    [t, o, i].forEach((f) => {
      f && f.setAttribute("theme", this.theme);
    });
    const r = t ? t.querySelectorAll("maui-table-row") : [], n = o ? o.querySelectorAll("maui-table-row") : [], c = i ? i.querySelectorAll("maui-table-row") : [], m = [...r, ...n, ...c], g = [...n, ...c];
    m.forEach((f, v) => {
      f.setAttribute("theme", this.theme), f.setAttribute("aria-rowindex", `${v + 1}`), f.querySelectorAll("maui-table-cell").forEach((x) => {
        this.equalColumns && x.setAttribute("equalwidth", "true");
      });
    }), r.forEach((f) => {
      f.setAttribute("theme", this.theme), f.querySelectorAll("maui-table-cell").forEach((x) => {
        x.setAttribute("theme", this.theme), x.setAttribute("type", "columnheader"), this.scrollTop > 0 ? x.setAttribute("overflow", "vertical") : x.removeAttribute("overflow");
      });
    }), g.forEach((f, v) => {
      f.setAttribute("theme", this.theme), f.setAttribute("data-content-row", `${v + 1}`);
      const x = r.length > 0, _ = f.querySelectorAll("maui-table-cell");
      _.forEach((L) => {
        L.setAttribute("theme", this.theme);
      });
      const $ = _[0];
      this.firstColHeader ? ($.setAttribute("type", x ? "emphasized" : "rowheader"), this.scrollLeft > 0 ? $.setAttribute("overflow", "horizontal") : $.removeAttribute("overflow")) : $.removeAttribute("type");
    }), this.setAttribute("aria-rowcount", `${m.length}`);
  }
  setFootnotes() {
    this.footnotes = [
      ...this.querySelectorAll("maui-table-footnote")
    ], this.footnotes.forEach((e, t) => {
      const o = document.createElement("maui-table-footnote"), i = t + 1;
      o.innerHTML = `${e.innerHTML}`, o.setAttribute("slot", "footnotes"), o.setAttribute("index", `${i}`), o.setAttribute("theme", `${this.theme}`), this.appendChild(o), e.setAttribute("referenceID", o.id), e.setAttribute("referenceLabel", `${i}`);
    });
  }
  handleSlotChange(e) {
    const t = e.target, { name: o } = t, i = t.assignedElements({ flatten: !0 }), r = Array.from(i);
    switch (o) {
      case "caption": {
        this.checkCaption(r);
        break;
      }
      case "": {
        this.setRowIndex(r);
        break;
      }
    }
  }
  firstUpdated() {
    this.setFootnotes();
  }
  updateCells() {
    const e = this.defaultSlot.assignedElements({
      flatten: !0
    }), t = Array.from(e);
    this.setRowIndex(t);
  }
  handleScroll() {
    this.checkOverflow();
  }
  checkOverflow() {
    this.scrollLeft = this.tableOverflow.scrollLeft, this.scrollTop = this.tableOverflow.scrollTop, this.scrollHeight = Math.abs(
      this.tableOverflow.scrollHeight - this.tableOverflow.clientHeight
    ), this.scrollWidth = Math.abs(
      this.tableOverflow.scrollWidth - this.tableOverflow.clientWidth
    ), this.overflowing = this.tableOverflow.scrollTop + this.tableOverflow.scrollLeft + this.scrollHeight + this.scrollWidth;
  }
  handleFirstColHeaderChange() {
    this.updateCells();
  }
  handleEqualColumnsChange() {
    this.updateCells();
  }
  handleOverflowingChange() {
    this.updateCells();
  }
  render() {
    return this.defaultSlot && this.checkOverflow(), u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      equalColumns: this.equalColumns,
      "auto-height": this.autoHeight,
      "auto-width": this.autoWidth
    })}
    >
      <slot name="caption" @slotchange=${this.handleSlotChange}></slot>

      <div class="clipping-wrapper">
        <div
          class="clipping right ${!this.autoWidth && this.overflowing && this.scrollWidth !== this.scrollLeft ? "visible" : ""}"
        ></div>
        <div
          class="${y({
      "table-overflow": !0
    })}"
          @scroll=${this.handleScroll}
        >
          <div class="table-wrapper">
            <slot @slotchange=${this.handleSlotChange}></slot>
          </div>
        </div>
        <div
          class="clipping bottom ${!this.autoHeight && this.overflowing && this.scrollHeight !== this.scrollTop ? "visible" : ""}"
        ></div>
      </div>

      <slot name="custom-controls"></slot>

      <maui-limited-width .theme=${this.theme}>
        <slot name="footnotes"></slot>
      </maui-limited-width>
    </div>`;
  }
}
ne.styles = z1;
xe([
  M("slot:not([name])")
], ne.prototype, "defaultSlot", 2);
xe([
  M(".table-overflow")
], ne.prototype, "tableOverflow", 2);
xe([
  O()
], ne.prototype, "footnotes", 2);
xe([
  O()
], ne.prototype, "overflowing", 2);
xe([
  O()
], ne.prototype, "scrollLeft", 2);
xe([
  O()
], ne.prototype, "scrollWidth", 2);
xe([
  O()
], ne.prototype, "scrollTop", 2);
xe([
  O()
], ne.prototype, "scrollHeight", 2);
xe([
  l({ type: Boolean, reflect: !0 })
], ne.prototype, "firstColHeader", 2);
xe([
  l({ type: Boolean, reflect: !0 })
], ne.prototype, "equalColumns", 2);
xe([
  l({ type: Boolean })
], ne.prototype, "autoHeight", 2);
xe([
  l({ type: Boolean })
], ne.prototype, "autoWidth", 2);
xe([
  F("firstColHeader", { waitUntilFirstUpdate: !0 })
], ne.prototype, "handleFirstColHeaderChange", 1);
xe([
  F("equalColumns", { waitUntilFirstUpdate: !0 })
], ne.prototype, "handleEqualColumnsChange", 1);
xe([
  F("overflowing", { waitUntilFirstUpdate: !0 })
], ne.prototype, "handleOverflowingChange", 1);
w("maui-table", ne);
const N1 = s`
  ::slotted(maui-table-row) {
    display: table-row;
    width: 100%;
    height: 100%;
  }

  .table-head {
    display: contents;
  }
`, I1 = [N1];
class rl extends k {
  constructor() {
    super(), this.componentName = "table-head";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "rowgroup");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <slot></slot>
    </div>`;
  }
}
rl.styles = I1;
w("maui-table-head", rl);
const U1 = s`
  ::slotted(maui-table-row) {
    display: table-row;
    width: 100%;
    height: 100%;
  }

  .table-body {
    display: contents;
  }
`, R1 = [U1];
class nl extends k {
  constructor() {
    super(), this.componentName = "table-body";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "rowgroup");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <slot></slot>
    </div>`;
  }
}
nl.styles = R1;
w("maui-table-body", nl);
const D1 = s`
  ::slotted(maui-table-row) {
    display: table-row;
    width: 100%;
    height: 100%;
  }

  .table-footer {
    display: contents;
  }
`, E1 = [D1];
class sl extends k {
  constructor() {
    super(), this.componentName = "table-footer";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "rowgroup");
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <slot></slot>
    </div>`;
  }
}
sl.styles = E1;
w("maui-table-footer", sl);
const ll = (a) => {
  const e = h(a);
  return s`
    .${e} .cell-content {
      ${d({ size: "copy-large", tenant: a })};
    }

    .${e}.columnheader .cell-content,
    .${e}.rowheader .cell-content {
      ${b({ size: "h3", tenant: a }).mobile};
      font-weight: var(--maui-font-weight-light);
    }
  `;
}, P1 = s`
  ${C}

  .table-cell {
    display: contents;

    --maui-table-cell-shadow-color: var(--maui-color-brand-black-transparent);
  }

  .cell-content {
    position: relative;
    display: block;
    padding: var(--maui-spacing-5) var(--maui-spacing-4);
    ${d({ size: "copy-medium", tenant: "wl" })};
    font-weight: var(--maui-font-weight-regular);
    font-family: var(--maui-font-family-copy);
    height: 100%;
    min-width: 200px;
    color: var(--maui-color-text-copy);
    white-space: wrap;
  }

  .equal-width .cell-content {
    min-width: unset;
  }

  .clipping {
    position: absolute;
    box-shadow: inset 0 0 0 0 #0000;
    pointer-events: none;
    transition: box-shadow 0.4s ease-in-out;
  }

  .clipping.right {
    height: 100%;
    left: 100%;
  }

  .clipping.bottom {
    width: 100%;
    top: 100%;
  }

  .clipping.right.visible {
    top: 0;
    width: 70px;
    box-shadow: inset 15px 0px 11px -10px var(--maui-table-cell-shadow-color);
  }

  .clipping.bottom.visible {
    bottom: 0;
    left: 0;
    height: 70px;
    box-shadow: inset 0px 15px 11px -10px var(--maui-table-cell-shadow-color);
  }

  .columnheader .cell-content,
  .rowheader .cell-content {
    ${b({ size: "h4", tenant: "wl" }).mobile};
    font-weight: var(--maui-font-weight-bold);
  }

  .columnheader .cell-content {
    border-bottom: 1px solid var(--maui-color-grey-04);
  }

  .rowheader .cell-content {
    border-right: 1px solid var(--maui-color-grey-04);
  }

  .emphasized:not(.columnheader, .rowheader) .cell-content {
    font-weight: var(--maui-font-weight-bold);
  }

  .emphasized:not(.columnheader, .rowheader)
    .cell-content
    maui-navigation-link {
  }

  slot[name='footnote'] {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: var(--maui-spacing-3);
    padding-inline: var(--maui-spacing-3);
  }
`, H1 = s`
  ${ll("lh")}

  .lh .cell-content {
    padding: calc(var(--maui-spacing-5) + var(--maui-spacing-1))
      var(--maui-spacing-4);
  }
`, G1 = s`
  ${ll("b2b")}

  .b2b .cell-content {
    padding: calc(var(--maui-spacing-5) + var(--maui-spacing-1))
      var(--maui-spacing-4);
  }
`, Y1 = s`
  .os.table-cell {
    --maui-table-cell-shadow-color: var(--maui-color-brand-osgrey8-transparent);
  }

  .os .cell-content {
    padding: var(--maui-spacing-4)
      calc(var(--maui-spacing-2) + var(--maui-spacing-3));
    ${d({ size: "copy-medium", tenant: "os" })};
  }

  .os.columnheader .cell-content,
  .os.rowheader .cell-content {
    ${b({ size: "h4", tenant: "os" }).mobile};
  }
`, T1 = s`
  .lx.table-cell {
    --maui-table-cell-shadow-color: var(--maui-color-brand-black-transparent);
  }

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

  .lx.columnheader .cell-content,
  .lx.rowheader .cell-content {
    ${b({ size: "h4", tenant: "lx" }).mobile};
  }
`, X1 = s`
  .sn.table-cell {
    --maui-table-cell-shadow-color: var(
      --maui-color-brand-sn-blue-4-transparent
    );
  }

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

  .sn.columnheader .cell-content,
  .sn.rowheader .cell-content {
    ${b({ size: "h4", tenant: "sn" }).mobile};
  }
`, V1 = s`
  .four_y.table-cell {
    --maui-table-cell-shadow-color: var(--maui-color-brand-black-transparent);
  }

  .four_y .cell-content {
    padding: var(--maui-spacing-5)
      calc(var(--maui-spacing-2) + var(--maui-spacing-3));
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }

  .four_y.columnheader .cell-content,
  .four_y.rowheader .cell-content {
    ${b({ size: "h6", tenant: "four_y" }).mobile};
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-color-text-headline);
  }

  .four_y.columnheader .cell-content {
    border-bottom: 2px solid var(--maui-color-interaction-focus);
  }

  .four_y.rowheader .cell-content {
    border-right: 2px solid var(--maui-color-interaction-focus);
  }
`, j1 = [
  P1,
  H1,
  Y1,
  T1,
  X1,
  G1,
  V1
];
var q1 = Object.defineProperty, K1 = Object.getOwnPropertyDescriptor, Ba = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? K1(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 && q1(e, t, i), i;
};
class Wo extends k {
  constructor() {
    super(), this.type = "default", this.equalWidth = !1, this.componentName = "table-cell";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "cell");
  }
  typeChanged() {
    if (this.type !== "default") {
      const e = this.type === "columnheader" ? "columnheader" : "rowheader";
      this.setAttribute("role", e);
    } else
      this.setAttribute("role", "cell");
  }
  handleSlotChange(e) {
    const t = e.target;
    X(t, ["MAUI-TABLE-FOOTNOTE"], void 0, !0);
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.type]: !0,
      "equal-width": this.equalWidth
    })}
    >
      <div class="cell-content overflow-vertical overflow-horizontal">
        <slot></slot>
        <slot name="footnote" @slotchange=${this.handleSlotChange}></slot>
        <div
          class="clipping bottom ${this.overflow === "vertical" ? "visible" : ""}"
        ></div>
        <div
          class="clipping right ${this.overflow === "horizontal" ? "visible" : ""}"
        ></div>
      </div>
    </div>`;
  }
}
Wo.styles = j1;
Ba([
  l({ type: String })
], Wo.prototype, "type", 2);
Ba([
  l({ type: String })
], Wo.prototype, "overflow", 2);
Ba([
  l({ type: Boolean, reflect: !0 })
], Wo.prototype, "equalWidth", 2);
Ba([
  F("type")
], Wo.prototype, "typeChanged", 1);
w("maui-table-cell", Wo);
const W1 = s`
  ::slotted(maui-table-cell) {
    display: table-cell;
    height: 1px;
    vertical-align: middle;
  }

  ::slotted(maui-table-cell[role='columnheader']) {
    background-color: var(
      --maui-table-header-background,
      var(--maui-color-br