cus-outline-offset: 0px;
      --maui-focus-radius: 0;
    }

    .${e}:not(.disabled, .has-error) .control {
      color: var(--maui-color-text-caption);
    }

    .${e}:not(.disabled, .has-error).is-open .control,
    .${e}:not(.disabled, .has-error).has-value.is-open .control {
      color: var(--maui-color-interaction-interaction);
      --maui-icon-color-override: var(--maui-color-interaction-interaction);
    }

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

    .${e}:not(.is-open, .disabled, .has-error).has-value .control {
      color: var(--maui-color-text-copy);
    }
    .${e} .trigger-label {
      height: var(--maui-line-height-3);
      transition: padding 0.3s ease-in-out;
      ${p({ size: "forms-large", tenant: a })};
    }

    .${e}.has-value:not(.disabled, .has-focus, .has-error, .is-open),
    .${e}:not(.disabled, .has-focus, .has-error, .is-open) {
      --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
    }

    .${e} {
      --maui-icon-color-override: var(--maui-color-interaction-interaction);
    }

    .${e}.has-focus:not(.disabled, .has-error) {
      --maui-icon-color-override: var(--maui-color-interaction-interaction);
    }

    .${e}:not(.disabled).has-error .control,
    .${e}:not(.disabled).has-error maui-icon {
      --maui-icon-color-override: var(--maui-color-message-error);
      color: var(--maui-color-message-error);
    }

    .${e} .options-wrapper {
      ${p({ size: "forms-medium", tenant: a })};
    }
  `;
}, cg = s`
  ${C}

  ${A}


  .autocomplete {
    font-family: var(--maui-font-family-copy);
    position: relative;
  }

  .trigger-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 10px;
  }

  :focus-visible {
    outline: none;
  }

  .result-list {
    position: absolute;
    width: 100%;
    margin: var(--maui-select-dropdown-margin);
    background-color: var(--maui-select-dropdown-background-color);
    box-shadow: var(--maui-select-dropdown-shadow);
    border: var(--maui-select-dropdown-border);
    z-index: 100;
  }

  .options-wrapper {
    display: flex;
    align-items: baseline;
    ${p({ size: "forms-medium", tenant: "wl" })};
    box-sizing: border-box;
  }

  .options-wrapper.with-group > * {
    flex: 1;
    width: calc(33.333% - 2px);
  }

  /* If there is no group it should not split the space equal */
  .options-wrapper:not(.with-group) > *:not(:first-child) {
    padding-left: var(--maui-spacing-3, 10px);
  }

  .option-value {
    text-transform: uppercase;
    text-align: center;
  }

  .option-group {
    text-align: right;
  }

  .dropdown-list {
    list-style: none;
    padding: var(--maui-select-dropdown-padding);
    margin: 0;
  }

  .result-dropdown.scrolling {
    max-height: var(--maui-option-list-max-height, 300px);
    overflow-y: auto;
  }

  .bold {
    font-weight: var(--maui-font-weight-bold);
  }

  .skeleton-loaders-container li.skeleton-loader:last-child {
    width: 61.8%;
  }

  maui-error-highlight {
    display: block;
  }

  maui-hint {
    margin-top: 6px;
  }

  .disabled .control,
  .disabled maui-icon,
  .disabled maui-hint,
  .disabled .control::placeholder,
  .disabled .control[disabled] {
    --maui-select-button-color: var(--maui-color-disabled-foreground);
    --maui-label-color-override: var(--maui-color-disabled-foreground);
    --maui-hint-color-override: var(--maui-color-disabled-foreground);
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
    color: var(--maui-color-disabled-foreground);
  }

  .icon-expand {
    transform: rotate(-180deg);
    transition: transform 0.25s linear;
  }

  /* last child is not working anymore needs to be fixed */
  .dropdown-list li.skeleton-loader:last-child {
    width: 61.8%;
  }

  .dropdown-list li.skeleton-loader:last-of-type {
    width: 61.8%;
  }

  /* Outline has to be fixed and tranisiton */
  maui-icon {
    outline: none;
  }

  .icon-wrapper button {
    outline: none;
  }

  .icon-wrapper .icon {
    transform: rotate(-180deg);
    transition: transform 0.25s linear !important;
  }

  .is-open .icon-expand {
    transform: rotate(0);
  }
  .wrapper {
    position: relative;
  }
  .overlay {
    position: absolute;
    right: var(--maui-select-clear-icon-right, 100px);
    top: 60%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--maui-select-optional-color, var(--maui-color-grey-07));
  }

  .control[disabled],
  .disabled.has-value .control[disabled] {
    cursor: not-allowed;
    color: var(--maui-color-disabled-foreground);
  }
`, dg = s`
  ${lg("lh")}
`, ug = s`
  .os {
    --maui-select-button-background: var(--maui-color-grey-02);
    --maui-select-button-height: 50px;
    --maui-select-button-padding: 0 12px;
    --maui-select-trigger-label-padding-focus: 22px 0 5px 0px;
    --maui-select-dropdown-padding: 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-shadow: 0px 2px 4px rgba(57, 69, 81, 0.2);
    --maui-select-error-box-margin: 6px 0 0 0;
    --maui-select-hint-box-margin: 6px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-brand-white);
    --maui-select-clear-icon-right: 42px;
    font-weight: var(--maui-font-weight-regular);
  }

  .os:not(.disabled, .has-error) maui-icon {
    --maui-icon-color-override: var(--maui-color-grey-07);
  }

  .os .trigger input {
    border-radius: var(--maui-spacing-1, 3px);
    background-color: #f1f3f5;
  }

  .os .control {
    padding: 0 12px;
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "os" })};
  }

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

  .os.has-value .control,
  .os.is-open .control {
    padding: 21px 12px 4px;
  }

  .os .control::placeholder {
    color: var(--maui-color-grey-07);
    padding-top: 0px;
  }

  .os:not(:disabled) .control {
    color: var(--maui-color-text-copy);
  }

  .os.disabled .control::placeholder {
    color: var(--maui-color-disabled-foreground);
  }

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

  .os.has-error .control {
    color: var(--maui-color-message-error);
    font-weight: var(--maui-font-weight-regular);
  }

  .os:not(.disabled).has-error .control,
  .os:not(.disabled).has-error maui-icon,
  .os:not(.disabled).has-error .control::placeholder {
    --maui-icon-color-override: var(--maui-color-message-error);
    color: var(--maui-color-message-error);
  }
`, mg = s`
  .lx {
    --maui-select-button-color: var(--maui-color-interaction-interaction);
    --maui-select-button-border: 1px solid var(--maui-color-grey-02);
    --maui-select-button-border-error: 1px solid var(--maui-color-message-error);
    --maui-select-button-border-disabled: 1px solid
      var(--maui-color-disabled-foreground);
    --maui-select-button-padding: 0px 11px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-border: var(--maui-select-button-border);
    --maui-select-error-box-margin: 6px 0 0 0;
    --maui-select-hint-box-margin: 8px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-brand-white);
    --maui-select-button-height: 50px;
    --maui-select-trigger-label-padding-focus: 21px 0 2px 0px;
    --maui-select-clear-icon-right: 41px;
    font-family: var(--maui-font-family-copy, sans-serif);
  }

  /* label font size 12 px */
  .lx .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 7px;
    opacity: 0;
    color: var(--maui-color-interaction-interaction);
  }

  /* Linehight for control 24px in figmar but dont exists */
  .lx .control {
    padding: 0 12px;
    line-height: var(--maui-line-height-2);
    color: var(--maui-color-text-copy);
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "lx" })};
  }

  .lx .dropdown {
    line-height: var(--maui-line-height-3);
  }

  .lx.has-value .control,
  .lx.is-open .control {
    padding: 21px 0px 1px 11px;
  }

  .lx .control::placeholder {
    font-family: var(--maui-font-family-copy, sans-serif);
    color: var(--maui-color-interaction-buttonsecondary);
    padding-top: 0px;
  }

  .lx .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "lx" })};
  }

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

  .lx.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
  .lx.has-value .label,
  .lx.has-focus .label {
    opacity: 1;
  }
`, hg = s`
  .sn {
    --maui-select-button-border: 1px solid var(--maui-color-grey-07);
    --maui-select-button-border-error: 1px solid var(--maui-color-message-error);
    --maui-select-button-border-disabled: 1px solid
      var(--maui-color-disabled-foreground);
    --maui-select-button-padding: 13px 10px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-border: 1px solid var(--maui-color-grey-04);
    --maui-select-error-box-margin: 5px 0 0 0;
    --maui-select-hint-box-margin: 5px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-brand-white);
    --maui-select-button-height: 50px;
    --maui-select-trigger-label-padding-focus: 21px 0 5px 0px;
    --maui-select-clear-icon-right: 39px;
    --maui-focus-outline-offset: 5px;
    --maui-focus-radius: 0px;
  }

  .sn:not(.has-value) .control {
    padding-left: 10px;
    color: var(--maui-color-text-caption);
  }

  .sn.has-value:not(.disabled) .control,
  .sn.is-open .control {
    padding: 21px 0 7px 9px;
    line-height: var(--maui-line-height-4);
  }

  .sn.has-error:not(.disabled) .control,
  .sn.has-error:not(.disabled) .control::placeholder {
    color: var(--maui-color-message-error);
  }

  .sn:not(.disabled) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .sn .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 6px;
    opacity: 0;
    color: var(--maui-color-text-caption);
  }
  .sn .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "sn" })};
  }

  .sn maui-hint {
    margin-top: 5px;
  }

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

  .sn.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }

  .sn.disabled.has-value .control {
    padding: 21px 0 5px 10px;
  }
`, pg = s`
  .b2b {
    --maui-select-button-color-value: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-select-button-border-bottom: 2px solid var(--maui-color-grey-07);
    --maui-select-button-border-bottom-disabled: 2px solid
      var(--maui-color-disabled-foreground);
    --maui-select-button-padding: 6px 5px 6px 0;
    --maui-select-trigger-label-padding-focus: 0 0 0 10px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    --maui-select-button-shadow-error: 0px 0px 6px
      var(--maui-color-message-error);
    --maui-select-dropdown-background-color: var(--maui-color-brand-white);
    --maui-select-clear-icon-right: 34px;
    --maui-focus-outline-offset: 0px;
    --maui-focus-radius: 0;
  }
  .b2b .trigger-label {
    ${p({ size: "forms-large", tenant: "b2b" })};
    font-weight: var(--maui-font-weight-regular);
    height: var(--maui-line-height-3);
    transition: padding 0.3s ease-in-out;
  }

  .b2b .options-wrapper {
    ${p({ size: "forms-medium", tenant: "b2b" })};
  }

  .b2b .trigger {
    border-bottom: var(--maui-select-button-border-bottom);
  }
  .b2b.has-value:not(.disabled, .has-focus, .has-error) .trigger {
    --maui-select-button-color: var(--maui-select-button-color-value);
    border-bottom-color: var(--maui-select-button-color-value);
  }
  .b2b.has-value:not(.disabled, .has-focus, .has-error) {
    --maui-icon-color-override: var(--maui-select-button-color-value);
  }
  .b2b.has-focus:not(.disabled, .has-error) .trigger {
    --maui-select-button-color: var(--maui-color-interaction-interaction);
    border-bottom-color: var(--maui-color-interaction-interaction);
  }
  .b2b.has-focus:not(.disabled, .has-error) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }
  .b2b.has-error:not(.disabled) .trigger {
    --maui-select-button-color: var(--maui-color-message-error);
    border-bottom-color: var(--maui-color-message-error);
  }
  .b2b.disabled .trigger {
    border-bottom-color: var(--maui-select-button-border-bottom-disabled);
  }
`, gg = s`
  .four_y {
    --maui-input-inset: calc(var(--maui-spacing-3) + var(--maui-spacing-2));

    --maui-select-button-border: 1px solid var(--maui-color-grey-07);
    --maui-select-button-border-error: 1px solid var(--maui-color-message-error);
    --maui-select-button-border-disabled: 1px solid
      var(--maui-color-disabled-foreground);
    --maui-select-button-padding: 13px 10px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-border: 1px solid var(--maui-color-grey-04);
    --maui-select-error-box-margin: 5px 0 0 0;
    --maui-select-hint-box-margin: 5px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-brand-white);
    --maui-select-button-height: 50px;
    --maui-select-trigger-label-padding-focus: 21px 0 5px
      var(--maui-input-inset);
    --maui-select-clear-icon-right: 39px;
    --maui-focus-outline-offset: 3px;
    --maui-focus-radius: 0px;
  }

  .four_y:not(.has-value) .control {
    color: var(--maui-color-interaction-interaction);
  }

  .four_y.has-value:not(.disabled) .control,
  .four_y.is-open .control {
    padding: 21px 0 5px var(--maui-input-inset);
    line-height: var(--maui-line-height-4);
  }

  .four_y:not(.disabled) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 6px;
    opacity: 0;
    color: var(--maui-color-text-caption);
  }
  .four_y .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-interaction-interaction);
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y.has-value .trigger-label {
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y .hint-error-box {
    margin-left: var(--maui-input-inset);
  }

  .four_y maui-hint {
    margin-top: 6px;
  }

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

  .four_y.disabled.has-value .control {
    padding: 21px 0 5px var(--maui-input-inset);
  }

  .four_y .result-list {
    width: calc(100% - (var(--maui-spacing-2) * 2));
    margin-left: var(--maui-spacing-2);
    overflow: hidden;
    border-radius: var(--maui-radii-radius-4);
    box-shadow: var(--maui-effect-elevation-1);
  }
`, bg = s`
  .mmg {
    --maui-select-button-background: var(--maui-color-brand-light);
    --maui-select-button-height: 50px;
    --maui-select-button-padding: 0 12px;
    --maui-select-trigger-label-padding-focus: 22px 0 5px 0px;
    --maui-select-dropdown-padding: 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-shadow: 0px 2px 4px rgba(57, 69, 81, 0.2);
    --maui-select-error-box-margin: 6px 0 0 0;
    --maui-select-hint-box-margin: 6px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-brand-light);
    --maui-select-clear-icon-right: 42px;
    --maui-select-option-padding: var(--maui-spacing-3) var(--maui-spacing-2);
    --maui-select-option-color: var(--maui-color-text-copy);
    --maui-select-option-background-selected: var(
      --maui-color-interaction-interaction
    );
    --maui-select-option-background-hover: var(
      --maui-color-interaction-interactionhover
    );
    --maui-select-option-color-hover: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-select-option-font-weight: var(--maui-font-weight-regular);
    font-weight: var(--maui-font-weight-regular);
  }

  .mmg:not(.disabled, .has-error) maui-icon {
    --maui-icon-color-override: var(--maui-color-grey-07);
  }

  .mmg .trigger input {
    border-radius: var(--maui-spacing-1, 3px);
  }

  .mmg .control {
    padding: 0 var(--maui-spacing-3);
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "mmg" })};
  }

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

  .mmg.has-value .control,
  .mmg.is-open .control {
    padding: var(--maui-spacing-5) var(--maui-spacing-3) var(--maui-spacing-1)
      var(--maui-spacing-3);
  }

  .mmg .control::placeholder {
    color: var(--maui-color-grey-07);
    padding-top: 0px;
  }

  .mmg.disabled .control::placeholder {
    color: var(--maui-color-disabled-foreground);
  }

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

  .mmg.has-error .control {
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-message-error);
  }

  .mmg:not(.disabled).has-error .control,
  .mmg:not(.disabled).has-error maui-icon,
  .mmg:not(.disabled).has-error .control::placeholder {
    --maui-icon-color-override: var(--maui-color-message-error);
    color: var(--maui-color-message-error);
  }

  .mmg.optgroup {
    font-weight: var(--maui-select-option-font-weight);
  }

  .mmg .icon-expand {
    transform: rotate(135deg);
  }

  .mmg.is-open .icon-expand {
    transform: rotate(0deg);
  }
`, vg = [
  cg,
  dg,
  ug,
  mg,
  hg,
  pg,
  gg,
  bg
];
class ni {
}
function wr(a, e, t = !1) {
  let o;
  return function(...i) {
    const r = this, n = () => {
      o = null, t || e.apply(r, i);
    }, c = t && !o;
    typeof o == "number" && clearTimeout(o), o = setTimeout(n, a), c && e.apply(r, i);
  };
}
function fg(a) {
  return (e, t, o) => {
    o.value = wr(a, e[t]);
  };
}
var yg = Object.defineProperty, xg = Object.getOwnPropertyDescriptor, J = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? xg(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 && yg(e, t, i), i;
};
class V extends Te {
  constructor(e) {
    super(), this.slottedOptions = [], this.optionList = [], this.formControlController = new tt(this, {
      value: (t) => t.value
    }), this.fetchedOptions = [], this.isOpen = !1, this.disabled = !1, this.hint = "", this.placeholderPermanent = !1, this.scrollingOptions = "scrolling", this.debounced = !1, this.initializeSlotObserver = () => {
      const t = this.querySelectorAll("maui-option, maui-optgroup");
      t.length > 0 && t.forEach((o) => {
        o.nodeType === Node.ELEMENT_NODE && this.mutationObserver.observe(o, {
          childList: !0,
          subtree: !0,
          characterData: !0
        });
      });
    }, this.debounceUserInput = wr(500, () => {
      this.userInput = "", this.debounced = !1;
    }), this.componentName = e, this.addEventListener("maui-init-selected", (t) => {
      this.selectOption(t.detail, !1);
    }), this.addEventListener("maui-selected", (t) => {
      this.checkState(t.detail);
    }), this.mutationObserver = new MutationObserver(
      this.handleSlotTextContentChange.bind(this)
    );
  }
  /**
   * find MAUIOption of currently selected option
   * @param selectedOption label and value state of selected option
   * @returns selected MAUIOption node
   */
  getSelectedOption(e) {
    return this.getOptions().find(
      (t) => t.getAttribute("optionValue") === e?.value
    );
  }
  connectedCallback() {
    super.connectedCallback(), this.handleOutsideClick = this.handleOutsideClick.bind(this), this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this), this.isOpen = !1, this.fetchedOptions = [], this.initializeSlotObserver();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.mutationObserver.disconnect();
  }
  updated(e) {
    super.updated(e), e.has("disabled") && (this.isOpen = !1), e.has("isOpen") && this.isOpen && this.scrollToSelectedOption();
  }
  scrollToSelectedOption() {
    requestAnimationFrame(() => {
      const e = this.shadowRoot?.querySelector("[selected]");
      e && e.scrollIntoView({
        behavior: "auto",
        block: "center"
      });
    });
  }
  addOpenListeners() {
    document.addEventListener("focusin", this.handleOutsideClick), document.addEventListener("keydown", this.handleDocumentKeyDown), document.addEventListener("mousedown", this.handleOutsideClick);
  }
  removeOpenListeners() {
    document.removeEventListener("focusin", this.handleOutsideClick), document.removeEventListener("keydown", this.handleDocumentKeyDown), document.removeEventListener("mousedown", this.handleOutsideClick), this.unobserveIntersection();
  }
  handleOutsideClick(e) {
    const t = e.composedPath();
    this && !t.includes(this) && this.handleBlur();
  }
  handleFocus(e) {
    super.handleFocus(), this.trigger.focus(e);
  }
  handleBlur() {
    super.handleBlur(), this.trigger.blur(), this.isOpen = !1;
  }
  focus(e) {
    this.handleFocus(e);
  }
  blur() {
    this.handleBlur();
  }
  handleClick() {
    this.isOpen = !this.isOpen;
  }
  handleOptionClick(e) {
    const o = e.target.closest("maui-option");
    o && this.selectOption(o);
  }
  /** set aria-label instead of aria-labelledby, because id cannot be resolved */
  setAriaLabelFromExternalLabel() {
  }
  /**
   * synchronize selected option with selected state (see checkState)
   *
   * then synchronize selected state with selected option
   * @param option selected option
   * @param shallFocus whether to close the dropdown and focus the input after selection, e.g. after interaction
   */
  selectOption(e, t = !0) {
    const o = this.selectedOption?.value;
    this.checkState(e), this.selectedOption?.value && this.selectedOption?.value !== o ? (this.getOptions().forEach((i) => {
      i.getAttribute("optionValue") === this.selectedOption?.value ? (i.setAttribute("selected", ""), i.originalOption?.setAttribute("selected", "")) : i.hasAttribute("selected") && (i.removeAttribute("selected"), i.originalOption?.removeAttribute("selected"));
    }), this.emit("maui-change", { detail: this.selectedOption })) : !this.selectedOption && o && (this.getOptions().forEach((i) => {
      i.hasAttribute("selected") && (i.removeAttribute("selected"), i.originalOption?.removeAttribute("selected"));
    }), this.emit("maui-change", { detail: this.selectedOption })), t && (this.isOpen = !1, this.trigger.focus());
  }
  loadMore(e, t) {
    !this.isOpen || !e[0].isIntersecting || ni.mode === "skeleton" || (t.unobserve(e[0].target), this.emit("maui-load"));
  }
  observeAnchorItem() {
    this.anchor && this.observer.observe(this.anchor);
  }
  // Triggers actions if text within the slot changes.
  handleSlotTextContentChange(e) {
    for (const t of e)
      (t.type === "characterData" || t.type === "childList") && (this.updateSelectedOption(), this.handleOptionsSlotChange());
  }
  // Only if  slot changes, updates the selectedOption based on the current 'maui-option' elements, sets it to undefined if no match is found.
  updateSelectedOption() {
    const e = this.querySelectorAll("maui-option");
    let t = !1;
    e.forEach((o) => {
      const i = o.getAttribute("optionvalue"), r = o.textContent?.trim() ?? "";
      this.selectedOption && i === this.selectedOption.value && (r !== this.selectedOption.label && (this.selectedOption.label = r), t = !0);
    }), t || (this.selectedOption = void 0);
  }
  attachAnchor() {
    const e = document.createElement("li");
    if (e.id = "infinity-loading-anchor", Array.from(this.dropdownList.classList).includes("result-dropdown")) {
      this.dropdownList.querySelector("ul")?.append(e);
      return;
    }
    this.dropdownList.append(e);
  }
  setCurrentOption(e) {
    this.getOptions().forEach((t) => {
      t.isCurrent = !1, t.tabIndex = -1;
    }), e ? (this.currentOption = e, this.currentOption.isCurrent = !0, this.currentOption.scrollIntoView({
      block: "nearest",
      inline: "nearest"
    })) : this.currentOption = void 0;
  }
  /**
   * synchronize selected option with selected state, i.e.
   *
   * this.selected = this.selectedOption.value
   * @param option selected option
   */
  checkState(e) {
    if (e) {
      if (this.selectedOption?.value !== e.optionValue) {
        const t = e.defaultSlot?.assignedNodes({
          flatten: !0
        })[0], o = t instanceof Element ? t?.querySelector(".option-label") : null;
        this.selectedOption = {
          value: e.optionValue,
          label: e.label || (o || e.defaultSlot?.assignedNodes({ flatten: !0 })[0] || e)?.textContent || // stepper if dropdown closed, i.e. no slot rendered
          // should not happen, render submit value as last resort
          e.optionValue
        }, this.value = this.selectedOption.value || "", this.selected = this.selectedOption.value || "";
      }
    } else
      this.selectedOption = void 0, this.value = "";
  }
  handleMouseMove(e) {
    const o = e.target.closest("maui-option");
    o && this.currentOption !== o && this.setCurrentOption(o);
  }
  /** unset hovered option when dropdown-list is no longer hovered */
  handleMouseLeave() {
    this.setCurrentOption(void 0);
  }
  handleDocumentKeyDown(e) {
    if (e.key === "Escape" && this.isOpen) {
      e.preventDefault(), this.isOpen = !1, this.trigger.focus();
      return;
    }
    if (e.key === "Tab") {
      this.isOpen && (this.currentOption && this.selectOption(this.currentOption, !1), this.isOpen = !1, this.trigger.focus());
      return;
    }
    if (e.key === "Enter" || e.key === " ") {
      if (!this.isOpen) {
        e.preventDefault(), this.isOpen = !0;
        return;
      }
      this.currentOption && (e.preventDefault(), this.selectOption(this.currentOption));
      return;
    }
    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
      const t = this.getOptions().indexOf(this.currentOption);
      let o = Math.max(0, t);
      if (e.preventDefault(), !this.isOpen && (this.isOpen = !0, this.currentOption))
        return;
      e.key === "ArrowDown" ? (o = t + 1, o > this.getOptions().length - 1 && (o = 0)) : e.key === "ArrowUp" ? (o = t - 1, o < 0 && (o = this.getOptions().length - 1)) : e.key === "Home" ? o = 0 : e.key === "End" && (o = this.getOptions().length - 1), this.setCurrentOption(this.getOptions()[o]);
    }
  }
  /** Include whitespaces when debounced(actively performing letterSearch) since we want to preserve e.g. spacebar keydown functionality for selecting option */
  isVisualCharacter(e) {
    return this.debounced ? /^[\s\S]$/.test(e) : /^[\S]$/.test(e);
  }
  /** Search for options by typing visual characters */
  letterSearch(e) {
    if (this.isVisualCharacter(e.key)) {
      this.userInput = this.userInput ? this.userInput + e.key : e.key;
      const t = this.getOptions().find(
        (o) => o.textContent?.toLowerCase().startsWith(this.userInput.toLowerCase())
      );
      this.debounced = !0, this.debounceUserInput(), t && (this.selectOption(t, !1), this.setCurrentOption(t));
    }
  }
  handleComboboxKeyDown(e) {
    e.stopPropagation(), this.handleDocumentKeyDown(e);
  }
  async handleOpenChange() {
    this.isOpen && !this.disabled ? (this.setCurrentOption(
      this.getSelectedOption(this.selectedOption) || void 0
    ), this.addOpenListeners(), await this.updateComplete, this.initIntersectionObserve()) : this.removeOpenListeners();
  }
  initIntersectionObserve() {
    this.dropdownList && (this.observer && this.unobserveIntersection(), this.observer = new IntersectionObserver(this.loadMore.bind(this), {
      threshold: 0.1,
      root: this.dropdownList
    }), this.attachAnchor(), this.observeAnchorItem());
  }
  unobserveIntersection() {
    this.observer.disconnect();
  }
  handleSelectionChange() {
    const e = this.getOptions().find(
      (t) => t.optionValue === this.selected
    );
    e && this.selectOption(e, !1);
  }
  handleClearClick() {
    this.selectOption(null);
  }
  /** get options on slotchange to update this.options */
  getOptions() {
    return this.slottedOptions;
  }
  updateOptions(e = "maui-optgroup, maui-option") {
    this.optionList = [];
    const t = [];
    return this.querySelectorAll(e).forEach((i) => {
      if (i.tagName.toLowerCase() === "maui-optgroup") {
        const r = this.cloneOptGroup(i);
        this.optionList.push(r), t.push(...r.querySelectorAll("maui-option"));
      } else if (!i.closest("maui-optgroup")) {
        const r = this.cloneOption(i);
        t.push(r), this.optionList.push(r);
      }
    }), t;
  }
  cloneOption(e) {
    const t = e.cloneNode(!0);
    return t.originalOption = e, t;
  }
  cloneOptGroup(e) {
    const t = document.createElement(
      "maui-optgroup"
    );
    return t.label = e.label, t.hasTopBorder = e.hasTopBorder, e.querySelectorAll("maui-option").forEach((o) => {
      t.appendChild(this.cloneOption(o));
    }), t;
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  handleOptionsSlotChange(e) {
    this.slottedOptions = this.updateOptions(), this.slottedOptions.forEach((t, o) => {
      t.setAttribute("theme", this.theme), t.setAttribute("id", t.id || `${this.id}-${o}`);
    }), this.handleSelectionChange(), this.initializeSlotObserver(), this.updateSelectedOption();
  }
  // only in select
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  renderLabel(e) {
    return "";
  }
  renderExpandIcon() {
    return "";
  }
  renderOptionalLabel() {
    return "";
  }
  renderClearButton() {
    return "";
  }
  shouldRenderPlaceholder() {
    return !1;
  }
  renderSelectOrInput(e, t) {
    return u`<button
      id=${this.id}
      class="trigger"
      role="combobox"
      ?disabled=${this.disabled}
      aria-disabled=${this.disabled}
      aria-controls="${this.id}-listbox"
      aria-expanded=${this.isOpen}
      aria-autocomplete="none"
      aria-activedescendant=${U(this.currentOption?.id)}
      aria-label="${U(this.setAriaLabelFromExternalLabel())}"
      aria-labelledby="${this.id}-label ${e ? "" : `${this.id}-placeholder`}"
      aria-describedby="${this.id}-hint ${this.id}-error"
      title=${this.title || this.buttonTriggerLabel}
      ?required=${this.required}
      aria-invalid=${this.hasError}
      @focus=${this.handleFocus}
      @blur=${this.isOpen ? null : this.handleBlur}
      @click=${this.handleClick}
      @keydown=${this.handleComboboxKeyDown}
    >
      <span id="${this.id}-placeholder" class="trigger-label"
        >${t}</span
      >
      ${this.renderExpandIcon()}
    </button>`;
  }
  renderHintOrError() {
    return "";
  }
  /**
   * for accessibility reasons, the slot contents are copied to the shadow-dom.
   * The hidden slot continues to listen to top-level DOM changes in the slot
   * @returns rendered result list
   */
  renderResultList() {
    return u`<div
      class="result-list"
      style=${this.isOpen === !0 ? "display: block" : "display: none;"}
    >
      <ul
        id="${this.id}-listbox"
        role="listbox"
        class=${y({
      "dropdown-list": !0,
      scrolling: this.scrollingOptions === "scrolling"
    })}
        aria-labelledby="${this.id}-label"
        @mousemove=${this.handleMouseMove}
        @mouseleave=${this.handleMouseLeave}
        @mouseup=${this.handleOptionClick}
      >
        ${this.optionList}
      </ul>
      <div style="display: none">
        <slot @slotchange=${this.handleOptionsSlotChange}></slot>
      </div>
    </div>`;
  }
  getClasses() {
    return {
      [this.componentName]: !0,
      [this.theme]: !0,
      "has-focus": this.hasFocus,
      "has-value": this.value && this.value !== "0" || this.userInput,
      "has-error": !!this.hasError,
      disabled: !!this.disabled,
      "is-open": this.isOpen
    };
  }
  render() {
    this.id = this.id || this.componentName;
    let e;
    this.selectedOption ? e = this.placeholderPermanent && this.shouldRenderPlaceholder() ? this.placeholder : this.selectedOption.label : this.isOpen ? e = this.placeholder && this.shouldRenderPlaceholder() ? this.placeholder : null : e = this.placeholder && this.shouldRenderPlaceholder() ? this.placeholder : this.buttonTriggerLabel;
    const t = !!this.placeholder && this.shouldRenderPlaceholder() || !!this.selectedOption || this.isOpen;
    return u`<div class=${y(this.getClasses())}>
      ${this.renderLabel(t)}
      <div class="wrapper">
        ${this.renderSelectOrInput(t, e)}
        ${this.renderOptionalLabel()} ${this.renderClearButton()}
      </div>

      <input
        type="text"
        class="validation-input"
        ?required=${this.required}
        tabindex="-1"
        hidden
        .value=${this.value}
      />
      ${this.renderResultList()} ${this.renderHintOrError()}
    </div>`;
  }
}
J([
  O()
], V.prototype, "slottedOptions", 2);
J([
  O()
], V.prototype, "optionList", 2);
J([
  O()
], V.prototype, "userInput", 2);
J([
  O()
], V.prototype, "selectedOption", 2);
J([
  O()
], V.prototype, "currentOption", 2);
J([
  O()
], V.prototype, "fetchedOptions", 2);
J([
  M(".trigger")
], V.prototype, "trigger", 2);
J([
  M(".dropdown-list")
], V.prototype, "dropdownList", 2);
J([
  M("#infinity-loading-anchor")
], V.prototype, "anchor", 2);
J([
  l({ type: String })
], V.prototype, "selected", 2);
J([
  l({ type: Boolean, reflect: !0 })
], V.prototype, "isOpen", 2);
J([
  l({ type: Boolean, reflect: !0 })
], V.prototype, "disabled", 2);
J([
  l({ type: String })
], V.prototype, "buttonTriggerLabel", 2);
J([
  l({ type: String, reflect: !0 })
], V.prototype, "hint", 2);
J([
  l({ type: String, reflect: !0 })
], V.prototype, "placeholder", 2);
J([
  l({ type: Boolean, reflect: !0 })
], V.prototype, "placeholderPermanent", 2);
J([
  l({ type: String, attribute: "scrolling-options" })
], V.prototype, "scrollingOptions", 2);
J([
  F("isOpen", { waitUntilFirstUpdate: !0 })
], V.prototype, "handleOpenChange", 1);
J([
  F("selected", { waitUntilFirstUpdate: !1 })
], V.prototype, "handleSelectionChange", 1);
var $g = Object.defineProperty, wg = Object.getOwnPropertyDescriptor, fe = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? wg(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 && $g(e, t, i), i;
};
class ae extends V {
  constructor() {
    super("autocomplete"), this.showGeolocationFinder = !1, this.clearable = !0, this.highlighting = !1, this.searchValueMinLength = 2, this.assistiveClear = "Clear", this.assistiveGeoLocation = "Access your current location", this.labelCallback = this.labelFallback, this.mode = "suggestions";
  }
  connectedCallback() {
    super.connectedCallback(), this.addEventListener("mousedown", (e) => {
      (this.userInput === void 0 || this.userInput === "") && this.selectedOption === void 0 && e.preventDefault();
    });
  }
  // eslint-disable-next-line class-methods-use-this
  labelFallback(e) {
    return `${e} results available. Use up and down arrows to navigate.`;
  }
  // @ts-expect-error (no event in handleClick in baseline)
  handleClick(e) {
    this.shadowRoot?.querySelector("maui-input")?.shadowRoot?.querySelector(".input")?.classList.contains("has-focus") === !1 && this.isOpen === !1 && this.trigger.focus(), e.target?.classList.contains("icon-expand") && !this.disabled ? this.isOpen = !this.isOpen : !this.isOpen && !this.disabled && (this.isOpen = !0);
  }
  muteEventIfOpen(e) {
    this.isOpen && e.stopPropagation();
  }
  async fetchOptions(e, t = !0) {
    const o = e?.trim() || "";
    if (o.length >= this.searchValueMinLength) {
      if (this.fetchData) {
        t && (this.mode = "skeleton");
        try {
          this.fetchedOptions = await this.fetchData(o);
        } catch {
          this.fetchedOptions = [];
        }
        this.mode = "fetched";
      }
    } else
      this.mode = "suggestions";
  }
  /**
   * @param showLabel flag whether to show the label, depends on selected state and open property
   * @param buttonTriggerLabel label or selected option, input value is kept dirty while typing
   * @returns rendered maui-input
   *
   * For accessibility reasons the input is inside the light-dom, i.e. shadow-dom of the autocomplete
   */
  renderSelectOrInput(e, t) {
    return u` <maui-input
      .theme=${this.theme}
      id="${this.id}-placeholder"
      class="trigger-label trigger"
      label=${this.buttonTriggerLabel}
      title=${this.title}
      ?hasError=${this.hasError && !this.disabled}
      ?required=${this.required}
      ?clearable=${this.clearable && this.isOpen}
      assistive-clear=${this.assistiveClear}
      ?disabled=${this.disabled}
      value=${e && t || ""}
      optional=${this.optional}
      autocomplete="off"
      @focus=${this.handleFocus}
      @blur=${this.isOpen ? null : this.handleBlur}
      @focusout=${this.muteEventIfOpen}
      @maui-blur=${this.muteEventIfOpen}
      @click=${this.handleClick}
      @maui-input=${this.handleInput}
      @maui-keydown=${(o) => this.handleComboboxKeyDown(o.detail.event)}
      .preventDefaultKeys=${["ArrowUp", "ArrowDown"]}
      icon=${U(
      this.showGeolocationFinder ? "icon-location" : void 0
    )}
      assistive-slotted-icon=${U(
      this.showGeolocationFinder ? "" : "Expand suggestions"
    )}
      assistive-icon=${U(
      this.showGeolocationFinder ? this.assistiveGeoLocation : void 0
    )}
      ><input
        slot="input"
        role="combobox"
        aria-owns="${this.id}-listbox"
        aria-controls="${this.id}-listbox"
        aria-expanded=${this.isOpen}
        aria-autocomplete="list"
        aria-activedescendant=${this.currentOption?.id || ""}
        aria-label="${U(
      this.ariaLabel || this.buttonTriggerLabel || void 0
    )}"
        aria-describedby="${this.id}-hint ${this.id}-error ${this.id}-list-hint"
      />${!this.showGeolocationFinder && this.renderExpandIcon()}</maui-input
    >`;
  }
  handleClearClick() {
    this.selectOption(null, !1);
  }
  /**
   * options getter considering options being rendered by template, not slot
   * @returns array of options from slot or template based on mode
   */
  getOptions() {
    return ["suggestions", "slotted"].includes(this.mode) ? this.slottedOptions : [
      ...this.dropdownList?.querySelectorAll("maui-option") || []
    ];
  }
  updateOptions() {
    if (["suggestions", "slotted"].includes(this.mode)) {
      const e = this.mode === "suggestions" ? "[slot=suggestions]" : ":not([slot])";
      return super.updateOptions(
        `maui-option${e}, maui-optgroup${e}`
      );
    }
    return this.getOptions();
  }
  /**
   set options state from slot contents (suggestions or default)
   includes filtering of valid options and adding fallback ids if needed
   */
  handleOptionsSlotChange(e) {
    const t = e.target;
    (t.name === "suggestions" || t.name === "") && (X(t, ["MAUI-OPTION", "MAUI-OPTGROUP"]), super.handleOptionsSlotChange());
  }
  handleInput(e, t = !0) {
    this.isOpen === !1 && (this.isOpen = !0), typeof e == "string" ? this.userInput = e : this.userInput = e.detail.value, this.userInput || this.handleClearClick(), this.debouncedLogic(t);
  }
  debouncedLogic(e) {
    this.fetchData && this.fetchOptions(this.userInput, e);
  }
  renderExpandIcon() {
    return u` <maui-icon
      slot="icon"
      .theme=${this.theme}
      aria-hidden="true"
      role="presentation"
      size="medium"
      class="icon-expand"
      use="icon-collapse"
      tabindex="-1"
    ></maui-icon>`;
  }
  // withBorder set to true if its a recursive call to add a border
  renderFetchedOptions(e, t, o = "") {
    return e.map((i, r) => i.area ? u`
          <maui-optgroup
            .theme=${this.theme}
            role="group"
            label=${i.area}
            ?hasTopBorder=${t === !0 || t === void 0 && r > 0}
          >
            ${this.renderFetchedOptions(
      i.items,
      !0,
      o ? `${o}-${r}` : `${r}`
    )}
          </maui-optgroup>
        ` : this.renderOption ? u`${this.renderOption({
      item: i,
      selectedValue: this.selectedOption?.value,
      currentValue: this.currentOption?.optionValue,
      highlightMatch: this.highlighting ? this.highlightMatch.bind(this) : (n) => n,
      id: `${this.id}-${o}-${r}`
    })}` : u`<maui-option
        id=${`${this.id}-${o}-${r}`}
        .theme=${this.theme}
        optionValue=${i.value}
        .isCurrent=${this.currentOption?.optionValue === `${i.value}`}
        ?selected=${this.selectedOption?.value === `${i.value}`}
        ><div class=${`options-wrapper ${i.group ? "with-group" : ""}`}>
          ${this.highlighting ? u`<span class="option-label"
                  >${this.highlightMatch(i.label)}</span
                >
                <span class="option-value"
                  >${this.highlightMatch(i.value)}</span
                >
                <span class="option-group"
                  >${this.highlightMatch(i.group)}</span
                >` : u`<span class="option-label">${i.label}</span>
                <span class="option-value">${i.value}</span>
                <span class="option-group">${i.group}</span>`}
        </div></maui-option
      >`);
  }
  highlightMatch(e, t = !1) {
    const o = e.toLowerCase().indexOf(this.userInput.toLowerCase());
    if (o !== -1) {
      const i = e.substring(0, o), r = e.substring(
        o,
        o + this.userInput.length
      ), n = e.substring(
        o + this.userInput.length
      );
      return t ? `${i}<span class="bold">${r}</span>${n}` : u`${i}<span class="bold">${r}</span>${n}`;
    }
    return e;
  }
  reInitIntersectionObserver() {
    (ni.mode !== this.mode || this.fetchedOptions.length > ni.arrLength) && this.initIntersectionObserve(), ni.arrLength = this.fetchedOptions.length, ni.mode = this.mode;
  }
  renderHintOrError() {
    const e = u`
      <div aria-live="polite" aria-relevant="additions" aria-atomic="true">
        ${this.hasError && !this.disabled ? u`<maui-error-highlight
              .theme=${this.theme}
              id="${this.id}-error"
              >${this.errorMessage}</maui-error-highlight
            >` : ""}
      </div>
      ${this.hasError ? "" : u`<maui-hint .theme=${this.theme} id="${this.id}-hint"
            >${this.hint}</maui-hint
          >`}
    `;
    return u`<div class="hint-error-box">${e}</div>`;
  }
  handleGeolocationClick() {
    this.emit("maui-locateme", { detail: "find geolocation clicked" });
  }
  renderGeolocationButton() {
    return this.showGeolocationFinder && !!this.value && !this.isOpen ? u`<button
          class="clear overlay"
          type="button"
          tabindex="-1"
          aria-label=${this.assistiveClear}
          @click=${this.handleGeolocationClick}
        >
          <maui-icon use="icon-location" .theme=${this.theme}></maui-icon>
        </button>` : "";
  }
  /**
   * Based on mode different results are rendered:
   * * suggestions: the slotted suggestions (1)
   * * slotted: the slotted options of default slot (1)
   * * skeleton: skeleton options to indicate loading, mode is set automatically on input event
   * * fetched: options from internal state and fetch API
   *
   * 1: for accessibility reasons, the slot contents are copied to the shadow-dom.
   *    The hidden slot continues to listen to top-level DOM changes in the slot
   * @returns rendered result list
   */
  renderResultList() {
    if (!this.isOpen)
      return null;
    let e, t;
    return this.mode === "suggestions" && (t = u`
        <slot
          name="suggestions"
          @slotchange=${this.handleOptionsSlotChange}
        ></slot>
      `), this.mode === "skeleton" && (e = u`
        <div class="skeleton-loaders-container">
          ${gp(
      bp(5),
      () => u` <li
              class="skeleton-loader"
              style="height: 18px; margin: 15px 10px"
            >
              <maui-skeleton></maui-skeleton>
            </li>`
    )}
        </div>
      `), this.mode === "fetched" && (e = u`${this.renderFetchedOptions(this.fetchedOptions)}`), this.mode === "slotted" && (t = u`<slot
        @slotchange=${this.handleOptionsSlotChange}
      ></slot>`), u`<div class="result-list">
      ${this.fetchedOptions.length === 0 && this.mode === "fetched" ? u`<slot name="result-list-hint" id="${this.id}-list-hint"></slot>` : ""}
      <div
        class=${y({
      scrolling: this.scrollingOptions === "scrolling",
      "result-dropdown": !0
    })}
      >
        <div
          class="sr-only"
          aria-live="polite"
          aria-relevant="additions"
          aria-atomic="true"
        >
          ${this.labelCallback(this.fetchedOptions.length)}
        </div>
        ${this.optionList.length || e ? u`<ul
              id="${this.id}-listbox"
              role="listbox"
              class=${y({
      "dropdown-list": !0
    })}
              aria-labelledby="${this.id}-label"
              @mousemove=${this.handleMouseMove}
              @mouseleave=${this.handleMouseLeave}
              @mouseup=${this.handleOptionClick}
            >
              ${t ? this.optionList : e}
            </ul>` : null}
        <slot name="result-list-end"></slot>
      </div>
      ${t ? u`<div style="display: none">${t}</div>` : ""}
      <slot name="footer"></slot>
    </div>`;
  }
  // render see maui-select-baseline
}
ae.styles = vg;
fe([
  M(".result-dropdown")
], ae.prototype, "dropdownList", 2);
fe([
  l({ type: Boolean })
], ae.prototype, "showGeolocationFinder", 2);
fe([
  l({ type: Boolean })
], ae.prototype, "clearable", 2);
fe([
  l({ type: Boolean })
], ae.prototype, "highlighting", 2);
fe([
  l({ type: String, reflect: !0 })
], ae.prototype, "optional", 2);
fe([
  l({ type: Number })
], ae.prototype, "searchValueMinLength", 2);
fe([
  l({ attribute: !1 })
], ae.prototype, "fetchData", 2);
fe([
  l({ attribute: !1 })
], ae.prototype, "renderOption", 2);
fe([
  l({ type: String, attribute: "assistive-clear" })
], ae.prototype, "assistiveClear", 2);
fe([
  l({ type: String, attribute: "assistive-geolocation" })
], ae.prototype, "assistiveGeoLocation", 2);
fe([
  l({ type: Function })
], ae.prototype, "labelCallback", 2);
fe([
  l({ type: String, reflect: !0 })
], ae.prototype, "mode", 2);
fe([
  oc({ capture: !0 })
], ae.prototype, "muteEventIfOpen", 1);
fe([
  fg(1e3)
], ae.prototype, "debouncedLogic", 1);
fe([
  F(["fetchedOptions", "mode"])
], ae.prototype, "reInitIntersectionObserver", 1);
w("maui-autocomplete", ae);
const _g = s`
  .breadcrumb {
    display: flex;
    column-gap: var(--maui-spacing-2);
    align-items: baseline;
  }
`, kg = [_g];
var Sg = Object.defineProperty, Og = Object.getOwnPropertyDescriptor, vs = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Og(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 && Sg(e, t, i), i;
};
class xa extends k {
  constructor() {
    super(), this.label = "", this.componentName = "breadcrumb";
  }
  handleSlotChange() {
    const e = [
      ...this.defaultSlot.assignedElements({ flatten: !0 })
    ].filter(
      (t) => t.tagName.toLowerCase() === "maui-breadcrumb-item"
    );
    e.forEach((t, o) => {
      t.setAttribute("theme", this.theme), o === e.length - 2 && t.setAttribute("parent", ""), o === e.length - 1 ? (t.setAttribute("aria-current", "page"), t.setAttribute("current", "")) : t.removeAttribute("aria-current");
    });
  }
  render() {
    return u`<nav
      class=${y({
      [this.componentName]: !0
    })}
      aria-label=${this.label}
    >
      <slot @slotchange=${this.handleSlotChange}></slot>
    </nav>`;
  }
}
xa.styles = kg;
vs([
  M("slot")
], xa.prototype, "defaultSlot", 2);
vs([
  l()
], xa.prototype, "label", 2);
w("maui-breadcrumb", xa);
const Mg = s`
  ${A}

  .item {
    display: inline-grid;
    align-items: baseline;
    grid-template-areas: 'icon label';
    column-gap: var(--maui-spacing-2);
    line-height: var(--breadcrumb-line-height, var(--maui-line-height-2));
  }

  .icon {
    grid-area: icon;
    align-self: center;
  }

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

  .label {
    align-self: baseline;
    grid-area: label;
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-regular);
    ${d({ size: "copy-medium", tenant: "wl" })};
  }

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

  .link {
    position: relative;
    color: var(--maui-color-interaction-interaction);
    text-decoration: none;
  }

  .link:hover {
    position: relative;
    color: var(--maui-color-interaction-interactionhover);
  }

  @media screen and (max-width: ${S["mini-tablet"]["min-width"]}px) {
    .breadcrumb-item:not(.parent),
    .icon:not(.mobile) {
      display: none;
    }
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .icon.mobile {
      display: none;
    }

    .item {
      grid-template-areas: 'label icon';
    }
  }

  ${H("link")};
`, Lg = s`
  .lh .label {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, Bg = 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%;
    }
  }

  .os .link:hover {
    position: relative;
    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 maui-icon {
    --maui-icon-color: var(--maui-color-interaction-interaction);
  }

  .os.current .label {
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-interaction-buttonprimary);
  }
  .os .label {
    ${d({ size: "copy-medium", tenant: "os" })};
  }
`, Cg = s`
  .lx .link:hover {
    text-decoration: underline;
  }

  .lx.current .label {
    color: var(--maui-color-interaction-buttonprimary);
  }

  .lx .item .icon {
    margin-top: -2px; /* offset to visually align text + icon */
    --maui-icon-color: var(--maui-color-interaction-buttonprimary);
  }

  .lx .label {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, zg = s`
  .sn.breadcrumb-item {
    --breadcrumb-line-height: var(--maui-line-height-4);
  }

  .sn.current .label {
    color: var(--maui-color-interaction-buttonsecondary);
  }

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

  .sn .link:hover {
    text-decoration: underline;
    color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .sn .label {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, Ag = s`
  .b2b maui-icon {
    --maui-icon-color: var(--maui-color-interaction-buttonprimary);
  }

  .b2b .label {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }
`, Fg = s`
  .four_y .label {
    ${d({ size: "copy-small", tenant: "four_y" })};
  }

  .four_y.current .label {
    color: var(--maui-color-interaction-interaction);
  }

  .four_y:not(.current) .item:hover {
    text-decoration: underline;
    color: var(--maui-color-interaction-interactionhover);
  }

  .four_y .item:hover maui-icon {
    --maui-icon-color: var(--maui-color-interaction-interactionhover);
  }
`, Ng = s`
  .mmg .label {
    ${d({ size: "copy-medium", tenant: "mmg" })};
  }

  .mmg.current .label {
    color: var(--maui-color-interaction-interactionhover);
    font-weight: var(--maui-font-weight-regular);
  }

  .mmg:not(.current) .item:hover {
    color: var(--maui-color-interaction-interactionhover);
  }
`, Ig = [
  Bg,
  Ag,
  zg,
  Lg,
  Cg,
  Mg,
  Fg,
  Ng
];
var Ug = Object.defineProperty, Rg = Object.getOwnPropertyDescriptor, _r = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Rg(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 && Ug(e, t, i), i;
};
class Mi extends k {
  constructor() {
    super(), this.current = !1, this.parent = !1, this.componentName = "breadcrumb-item";
  }
  render() {
    const { current: e, parent: t } = this;
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      current: e,
      parent: t
    })}
    >
      ${e ? u`<span class="item"
            ><span class="label"><slot></slot></span
          ></span>` : u`<span class="item">
            <maui-icon
              size="small"
              use="icon-breadcrumb-prev"
              class="icon mobile"
              .theme=${this.theme}
            ></maui-icon>
            <a
              class="link label"
              tabindex="0"
              href="${this.href}"
              target="_self"
            >
              <slot></slot></a
            ><maui-icon
              size="small"
              use="icon-breadcrumb-next"
              class="icon"
              .theme=${this.theme}
            ></maui-icon
          ></span>`}
    </div>`;
  }
}
Mi.styles = Ig;
_r([
  l({ type: String })
], Mi.prototype, "href", 2);
_r([
  l({ type: Boolean })
], Mi.prototype, "current", 2);
_r([
  l({ type: Boolean })
], Mi.prototype, "parent", 2);
w("maui-breadcrumb-item", Mi);
const Dg = s`
  maui-calendar {
    --maui-calendar-columns: 1;
  }

  .calendar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    maui-modal {
      --maui-modal-custom-width: min-content;
    }
  }

  @media screen and (min-width: ${S.tablet["min-width"]}px) {
    maui-calendar {
      --maui-calendar-columns: 2;
    }
  }
`, Eg = [Dg], Pg = s`
  ${A}

  .calendar-day {
    position: relative;
    font-family: var(--maui-font-family-copy);
    ${d({ size: "copy-medium", tenant: "wl" })};
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background-color: var(--maui-color-brand-light);
    border: 0;
    color: var(--maui-color-text-copy);

    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    z-index: 0;
  }

  .calendar-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    box-shadow: 0 0 0 1px var(--maui-color-grey-02);
    transition: box-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
  }

  .calendar-day:not(.selected, .inactive) {
    cursor: pointer;
  }

  .calendar-day:not(.selected, .inactive):hover {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .calendar-day:not(.selected, .inactive):hover::before {
    box-shadow: 0 0 0 1px var(--maui-color-interaction-interactionhover);
  }

  .selected {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-interaction-buttonsecondary);
    font-weight: var(--maui-font-weight-bold);
    z-index: 2;
  }

  .selected::before {
    box-shadow: 0 0 0 1px var(--maui-color-interaction-buttonsecondary);
  }

  .today {
    z-index: 1;
  }

  .today:not(.selected, :hover)::before {
    box-shadow: 0 0 0 1px var(--maui-color-grey-05);
  }

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

  .inactive::before {
    box-shadow: 0 0 0 1px var(--maui-color-disabled-background);
  }

  .indicator {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .calendar-day {
      width: 50px;
      height: 50px;
    }
  }

  ${H("calendar-day:not(.inactive)")}
`, Hg = s`
  .lh.calendar-day {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, Gg = s`
  .os.calendar-day::before {
    box-shadow: none;
  }

  .os.calendar-day {
    border-radius: var(--maui-radii-default-radius);
    ${d({ size: "copy-medium", tenant: "os" })};
  }

  .os.calendar-day:not(.selected, .inactive):hover::before {
    box-shadow: none;
  }

  .os.calendar-day:not(.selected, .inactive):hover {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-interaction-buttonprimaryhover);
  }

  .os.today:not(.selected, :hover) {
    border: 1px solid var(--maui-color-grey-04);
  }

  .os.selected {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-interaction-buttonprimary);
  }
`, Yg = s`
  .lx.calendar-day {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .lx.calendar-day:not(.selected, .inactive, :hover) {
    color: var(--maui-color-interaction-interaction);
  }

  .lx.calendar-day:not(.selected, .inactive)::before {
    box-shadow: 0 0 0 1px var(--maui-color-grey-01);
  }

  .lx.calendar-day:not(.selected, .inactive):hover::before {
    box-shadow: 0 0 0 1px var(--maui-color-interaction-interactionhover);
  }

  .lx.selected {
    background-color: var(--maui-color-interaction-buttonprimary);
    font-weight: var(--maui-font-weight-bold);
  }

  .lx.selected::before {
    box-shadow: 0 0 0 1px var(--maui-color-interaction-buttonprimary);
  }

  .lx.inactive::before {
    box-shadow: 0 0 0 1px var(--maui-color-disabled-background-inverted);
  }

  .lx.today:not(.selected, :hover)::before {
    box-shadow: 0 0 0 1px var(--maui-color-grey-02);
  }
`, Tg = s`
  .sn.calendar-day::before,
  .sn.calendar-day.today:not(.selected, :hover)::before {
    box-shadow: none;
  }

  .sn.calendar-day {
    border-radius: var(--maui-radii-default-radius);
    ${d({ size: "copy-medium", tenant: "sn" })};
  }

  .sn.calendar-day:not(.selected, .inactive) {
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.calendar-day:not(.selected, .inactive):hover::before {
    box-shadow: none;
  }

  .sn.calendar-day:not(.selected, .inactive):hover {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .sn.today:not(.selected, :hover) {
    border: 1px solid var(--maui-color-grey-04);
  }

  .sn .indicator {
    top: 0;
    left: auto;
    right: 0;
  }
`, Xg = s`
  .b2b.selected {
    background-color: var(--maui-color-interaction-buttonprimary);
  }

  .b2b.selected::before {
    box-shadow: 0 0 0 1px var(--maui-color-interaction-buttonprimary);
  }

  .b2b.calendar-day {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }
`, Vg = s`
  .four_y.calendar-day {
    --maui-focus-radius: calc(
      var(--maui-radii-default-radius) + var(--maui-radii-focus-offset)
    );
    --maui-focus-outline-offset: 4px;
  }

  .four_y.calendar-day,
  .four_y.calendar-day::before {
    border-radius: var(--maui-radii-default-radius);
  }
  .four_y.calendar-day:not(.today)::before {
    display: none;
  }
  .four_y.calendar-day:not(.selected, .inactive):hover {
    outline: 2px solid var(--maui-color-interaction-interactionhover);
    outline-offset: -1px;
  }
`, jg = s`
  .mmg.calendar-day {
    ${d({ size: "copy-medium", tenant: "mmg" })};
  }

  .mmg.calendar-day:has(.content) {
    align-content: space-between;
    justify-content: center;
  }

  .mmg.calendar-day:not(.selected, .inactive, :hover) {
    color: var(--maui-color-interaction-interaction);
  }

  .mmg.selected {
    background-color: var(--maui-color-brand-mmg-interaction);
  }

  .mmg.selected::before {
    box-shadow: 0 0 0 1px var(--maui-color-brand-mmg-interaction);
  }

  .mmg.today:not(.selected, :hover)::before {
    box-shadow: 0 0 1px var(--maui-color-brand-mmg-interaction);
  }

  .mmg.today .indicator {
    display: none;
  }

  .mmg.inactive::before,
  .mmg.today.inactive::before {
    box-shadow: 0 0 1px var(--maui-color-brand-mmg-grey1-transparent-40);
  }

  .mmg.today.inactive::before {
    box-shadow: 0 0 1px var(--maui-color-disabled-background);
  }

  @media (min-width: ${S.phablet["min-width"]}px) {
    .mmg.calendar-day:has(.content) {
      align-content: center;
    }
  }
`, qg = [
  Gg,
  Xg,
  Tg,
  Hg,
  Yg,
  Pg,
  Vg,
  jg
], le = (a) => {
  const e = a.getTimezoneOffset() * 6e4;
  return new Date(a.valueOf() - e).toISOString().slice(0, -1);
}, Ka = (a, e) => new Intl.DateTimeFormat(e || navigator.languages[0], {
  month: "long",
  year: "numeric"
}).formatToParts(new Date(a)).map(({ type: t, value: o }) => {
  if (t !== "literal")
    return o;
}).filter((t) => t).join("_"), Kg = (a = "001") => {
  const e = {
    "001": "mon",
    AD: "mon",
    AE: "sat",
    AF: "sat",
    AG: "sun",
    AI: "mon",
    AL: "mon",
    AM: "mon",
    AN: "mon",
    AR: "mon",
    AS: "sun",
    AT: "mon",
    AU: "sun",
    AX: "mon",
    AZ: "mon",
    BA: "mon",
    BD: "sun",
    BE: "mon",
    BG: "mon",
    BH: "sat",
    BM: "mon",
    BN: "mon",
    BR: "sun",
    BS: "sun",
    BT: "sun",
    BW: "sun",
    BY: "mon",
    BZ: "sun",
    CA: "sun",
    CH: "mon",
    CL: "mon",
    CM: "mon",
    CN: "sun",
    CO: "sun",
    CR: "mon",
    CY: "mon",
    CZ: "mon",
    DE: "mon",
    DJ: "sat",
    DK: "mon",
    DM: "sun",
    DO: "sun",
    DZ: "sat",
    EC: "mon",
    EE: "mon",
    EG: "sat",
    ES: "mon",
    ET: "sun",
    FI: "mon",
    FJ: "mon",
    FO: "mon",
    FR: "mon",
    GB: "mon",
    "GB-alt-variant": "sun",
    GE: "mon",
    GF: "mon",
    GP: "mon",
    GR: "mon",
    GT: "sun",
    GU: "sun",
    HK: "sun",
    HN: "sun",
    HR: "mon",
    HU: "mon",
    ID: "sun",
    IE: "mon",
    IL: "sun",
    IN: "sun",
    IQ: "sat",
    IR: "sat",
    IS: "mon",
    IT: "mon",
    JM: "sun",
    JO: "sat",
    JP: "sun",
    KE: "sun",
    KG: "mon",
    KH: "sun",
    KR: "sun",
    KW: "sat",
    KZ: "mon",
    LA: "sun",
    LB: "mon",
    LI: "mon",
    LK: "mon",
    LT: "mon",
    LU: "mon",
    LV: "mon",
    LY: "sat",
    MC: "mon",
    MD: "mon",
    ME: "mon",
    MH: "sun",
    MK: "mon",
    MM: "sun",
    MN: "mon",
    MO: "sun",
    MQ: "mon",
    MT: "sun",
    MV: "fri",
    MX: "sun",
    MY: "mon",
    MZ: "sun",
    NI: "sun",
    NL: "mon",
    NO: "mon",
    NP: "sun",
    NZ: "mon",
    OM: "sat",
    PA: "sun",
    PE: "sun",
    PH: "sun",
    PK: "sun",
    PL: "mon",
    PR: "sun",
    PT: "sun",
    PY: "sun",
    QA: "sat",
    RE: "mon",
    RO: "mon",
    RS: "mon",
    RU: "mon",
    SA: "sun",
    SD: "sat",
    SE: "mon",
    SG: "sun",
    SI: "mon",
    SK: "mon",
    SM: "mon",
    SV: "sun",
    SY: "sat",
    TH: "sun",
    TJ: "mon",
    TM: "mon",
    TR: "mon",
    TT: "sun",
    TW: "sun",
    UA: "mon",
    UM: "sun",
    US: "sun",
    UY: "mon",
    UZ: "mon",
    VA: "mon",
    VE: "sun",
    VI: "sun",
    VN: "mon",
    WS: "sun",
    XK: "mon",
    YE: "sun",
    ZA: "sun",
    ZW: "sun"
  };
  return ["mon", "tue", "wed", "thu", "fri", "sat", "sun"].indexOf(e[a]) + 1;
}, fs = (a = navigator.languages[0]) => {
  const { weekInfo: e, region: t } = new Intl.Locale(a);
  return e ? e.firstDay : Kg(t);
}, Wg = (a = { type: "narrow" }) => {
  const e = /* @__PURE__ */ new Date(), t = [], { type: o, locale: i } = a, r = fs(i || navigator.languages[0]), n = (c, m) => c.slice(m).concat(c.slice(0, m));
  for (let c = 1; c <= 7; c += 1) {
    const m = e.getDate() - e.getDay() + c, g = new Date(e.setDat