ar(--maui-color-grey-07);
  }
`, Vs = 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: 6px 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 1px 0px;
    --maui-select-clear-icon-right: 41px;
  }
  .lx:not(.disabled) {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }
  .lx .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 7px;
    opacity: 0;
    color: var(--maui-color-interaction-interaction);
  }
  .lx:not(.has-value) .label {
    opacity: 0;
  }

  .lx .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "lx" })};
  }
  .lx.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
    color: var(--maui-color-text-copy);
  }
  .lx.clearable.is-open.has-focus .trigger-label {
    padding: 21px 24px 1 px 0;
  }

  .lx.has-value .label,
  .lx.has-focus.has-value .label,
  .lx:not(.has-value).is-open .label {
    opacity: 1;
  }

  .lx.has-error.has-value:not(.disabled) .trigger-label {
    color: var(--maui-color-text-copy);
  }

  .lx.has-error:not(.disabled):not(.has-value) .trigger-label {
    color: var(--maui-select-button-color);
  }

  .lx .optional-label {
    ${d({ size: "copy-small", tenant: "lx" })};
  }
`, js = 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 13px 9px;
    --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 7px 0px;
    --maui-select-clear-icon-right: 39px;
    --maui-focus-outline-offset: 5px;
    --maui-focus-radius: 0px;
  }
  .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: 5px;
    opacity: 0;
    color: var(--maui-color-text-caption);
  }
  .sn:not(.has-value) .label {
    opacity: 0;
  }

  .sn .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "sn" })};
  }
  .sn.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
    color: var(--maui-color-interaction-buttonsecondary);
  }
  .sn.clearable.is-open.has-focus .trigger-label {
    padding: 21px 24px 7px 0;
  }

  .sn.has-value .label,
  .sn.has-focus.has-value .label,
  .sn:not(.has-value).is-open .label {
    opacity: 1;
  }

  .sn.has-error.has-value:not(.disabled) .trigger-label {
    color: var(--maui-color-message-error);
  }

  .sn .optional-label {
    ${d({ size: "copy-small", tenant: "sn" })};
  }
`, qs = 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-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-clear-icon-right: 34px;
    --maui-focus-outline-offset: 0px;
    --maui-focus-radius: 0;
  }

  .b2b .label {
    margin-bottom: 4px;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  .b2b .label.label-shown {
    transform: translateY(0);
    opacity: 1;
  }

  .b2b .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "b2b" })};
    height: var(--maui-line-height-3);
    transition: padding 0.3s ease-in-out;
  }
  .b2b .trigger {
    border-bottom: var(--maui-select-button-border-bottom);
  }

  .b2b.has-error:not(.has-value) .trigger-label {
    color: var(--maui-color-text-caption);
  }

  .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);
  }

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

  .b2b .optional-label {
    ${d({ size: "copy-small", tenant: "b2b" })};
  }
`, Ks = s`
  .four_y {
    --maui-input-inset: calc(var(--maui-spacing-2) + var(--maui-spacing-3));
    --maui-select-button-background: var(--maui-color-grey-02);
    --maui-select-button-height: 50px;
    --maui-select-button-padding: 0 13px 0 var(--maui-input-inset);
    --maui-select-trigger-label-padding-focus: 21px 0 5px 0px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px var(--maui-spacing-2) 0;
    --maui-select-dropdown-shadow: var(--maui-effect-elevation-1);
    --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: 43px;

    --maui-focus-radius: var(--maui-radii-pill-radius);
  }

  .four_y.has-focus {
    --maui-focus-outline-offset: 3px;
  }

  .four_y .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: var(--maui-input-inset);
    top: 7px;
    opacity: 0;
  }

  .four_y:not(.has-value) .label {
    opacity: 0;
  }

  .four_y .trigger {
    border-radius: var(--maui-radii-pill-radius);
  }

  .four_y .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-text-copy);
    ${p({ size: "forms-large", tenant: "four_y" })};
  }
  .four_y.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y.has-value.has-error .trigger-label {
    color: var(--maui-color-text-copy);
  }

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

  .four_y.clearable.is-open.has-focus .trigger-label {
    padding: 21px 6px 5px 0;
  }

  .four_y.has-value .label,
  .four_y.has-focus.has-value .label,
  .four_y:not(.has-value).is-open .label {
    opacity: 1;
  }

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

  .four_y.has-error maui-icon {
    --maui-icon-color-override: var(--maui-color-message-error);
  }

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

  .four_y .result-list {
    width: calc(100% - (var(--maui-spacing-2) * 2));
    overflow: hidden;
    border-radius: var(--maui-radii-radius-4);
  }

  .four_y .hint-error-box {
    margin-left: var(--maui-input-inset);
  }
`, Ws = s`
  .mmg {
    --maui-select-button-background: var(--maui-color-brand-light);
    --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: var(--maui-spacing-3);
    --maui-select-dropdown-padding: 0;
    --maui-select-dropdown-margin: var(--maui-spacing-3) 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 7px 0px;
    --maui-select-clear-icon-right: 39px;
    --maui-focus-outline-offset: 5px;
  }
  .mmg:not(.disabled) {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }
  .mmg .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 5px;
    opacity: 0;
  }
  .mmg:not(.has-value) .label {
    opacity: 0;
  }

  .mmg .trigger {
    --maui-select-button-color: var(--maui-color-text-copy);
  }

  .mmg .trigger:required {
    --maui-select-button-border: 1px solid
      var(--maui-color-interaction-interaction);
  }

  .mmg .trigger-label {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "mmg" })};
  }
  .mmg.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
  .mmg.clearable.is-open.has-focus .trigger-label {
    padding: 21px 24px 7px 0;
  }

  .mmg.has-value .label,
  .mmg.has-focus.has-value .label,
  .mmg:not(.has-value).is-open .label {
    opacity: 1;
  }

  .mmg.has-error.has-value:not(.disabled) .trigger-label {
    color: var(--maui-select-button-color);
  }

  .mmg.has-error.has-value:not(.disabled) .trigger {
    --maui-icon-color-override: var(--maui-color-message-error);
  }

  .mmg.disabled .trigger-label {
    color: var(--maui-colord-background-disabled);
  }

  .mmg .optional-label {
    ${d({ size: "copy-small", tenant: "mmg" })};
  }
`, vx = [
  Ys,
  Ts,
  Xs,
  Vs,
  js,
  qs,
  Ks,
  Ws
];
var fx = Object.defineProperty, yx = Object.getOwnPropertyDescriptor, Ma = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? yx(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 && fx(e, t, i), i;
};
class jo extends V {
  constructor() {
    super("select"), this.clearable = !1, this.assistiveClear = "Clear", this.debouncedUpdateLabelWidths = wn(() => {
      const e = this.shadowRoot?.querySelector(".optional-label");
      if (e) {
        const t = e.offsetWidth;
        this.style.setProperty(
          "--optional-label-width",
          `${t}px`
        );
      }
    }, 300), this.bindDebouncedUpdateLabelWidths = this.debouncedUpdateLabelWidths.bind(this), this.debouncedUpdateLabelWidths(), this.handleOptionsSlotChange();
  }
  connectedCallback() {
    super.connectedCallback(), window.addEventListener("resize", this.bindDebouncedUpdateLabelWidths);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), window.removeEventListener("resize", this.bindDebouncedUpdateLabelWidths);
  }
  handleClearClick() {
    this.selectOption(null);
  }
  static shouldRenderPlaceholder() {
    return !0;
  }
  handleSelectionChange() {
    const e = this.getOptions().find(
      (t) => t.optionValue === this.selected
    );
    e ? this.selectOption(e, !1) : this.selectOption(null, !1);
  }
  updated(e) {
    super.updated(e), e.has("optional") && this.debouncedUpdateLabelWidths();
  }
  renderLabel(e) {
    return u`<maui-label
      id="${this.id}-label"
      class=${y({ label: !0, "label-shown": e })}
      .ariaHidden=${e ? "false" : "true"}
      .theme=${this.theme}
      >${this.buttonTriggerLabel}</maui-label
    >`;
  }
  // only in select
  renderExpandIcon() {
    return u` <maui-icon
      .theme=${this.theme}
      aria-hidden="true"
      size="medium"
      class="icon-expand"
      use="icon-collapse"
    ></maui-icon>`;
  }
  handleDocumentKeyDown(e) {
    super.handleDocumentKeyDown(e), super.letterSearch(e);
  }
  renderOptionalLabel() {
    return this.required || this.value ? "" : u`<div class="optional-label overlay">${this.optional}</div>`;
  }
  renderClearButton() {
    return this.clearable && !!this.value && this.isOpen ? u`<button
          class="clear overlay"
          type="button"
          tabindex="-1"
          aria-label=${this.assistiveClear}
          @click=${this.handleClearClick}
        >
          <maui-icon use="icon-clear" .theme=${this.theme}></maui-icon>
        </button>` : "";
  }
  renderHintOrError() {
    const e = u`
      <div aria-live="polite" aria-relevant="additions" aria-atomic="true">
        ${this.errorMessage ? u`<maui-error-highlight
              .theme=${this.theme}
              id="${this.id}-error"
              >${this.errorMessage}</maui-error-highlight
            >` : ""}
      </div>
      ${!this.errorMessage && this.hint ? u`<maui-hint .theme=${this.theme} id="${this.id}-hint"
            >${this.hint}</maui-hint
          >` : ""}
    `;
    return u`<div class="hint-error-box">${e}</div>`;
  }
  getClasses() {
    return { ...super.getClasses(), clearable: this.clearable };
  }
  // render see maui-select-baseline
}
jo.styles = vx;
Ma([
  l({ type: Boolean })
], jo.prototype, "clearable", 2);
Ma([
  l({ type: String, reflect: !0 })
], jo.prototype, "optional", 2);
Ma([
  l({ type: String, attribute: "assistive-clear" })
], jo.prototype, "assistiveClear", 2);
Ma([
  F("selected", { waitUntilFirstUpdate: !1 })
], jo.prototype, "handleSelectionChange", 1);
w("maui-select", jo);
const Zs = (a) => {
  const e = h(a);
  return s`
    .${e} .value {
      ${p({ size: "forms-large", tenant: a })};
    }
  `;
}, xx = s`
  ${C}

  ${A}

  .slider {
    --knob-size: 18px;
    --knob-size-hover: 20px;
    --slider-color: var(--maui-color-interaction-buttonsecondary);
    --knob-color: var(--slider-color);
    --knob-interaction-color: var(--maui-color-interaction-interactionhover);
    --desktop-wrapper-height: 56px;
    --mobile-wrapper-height: 54px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 23px;
    padding-bottom: var(--maui-spacing-3);
    @media (max-width: 767px) {
      --knob-size: 22px;
      --knob-size-hover: 24px;
    }
  }
  .hidden-input {
    display: none;
  }

  .slider-head {
    display: flex;
    flex-direction: row;
    gap: var(--maui-spacing-3);
    align-items: baseline;
    @media (max-width: 767px) {
      flex-direction: column;
      gap: 0;
    }
  }

  .slider-content {
    width: calc(100% - var(--knob-size));
    margin: 0 auto;
    z-index: 1;
    pointer-events: none;
  }

  .track-wrapper {
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    top: -7px;
  }

  .track {
    background-color: var(--maui-color-disabled-background);
    height: 2px;
    width: 100%;
  }

  .knob-wrapper {
    display: flex;
    align-items: center;
    padding: 4px;
    position: absolute;
    bottom: -1px;
    left: var(--slider-progress, 0);
    transform: translate(-50%, 50%);
    height: var(--desktop-wrapper-height);
    @media (max-width: 767px) {
      height: var(--mobile-wrapper-height);
    }
  }

  .slider:not([disabled]) .knob-wrapper {
    pointer-events: all;
  }

  .knob-wrapper:hover .knob {
    background-color: var(--knob-interaction-color);
    width: var(--knob-size-hover);
    height: var(--knob-size-hover);
  }

  .knob {
    position: relative;
    height: var(--knob-size);
    width: var(--knob-size);
    border-radius: 50%;
    background-color: var(--knob-color);
    outline: 0;
  }

  .slider[disabled] {
    --slider-color: var(--maui-color-disabled-background);
  }

  .slider[disabled] label {
    pointer-events: none;
  }

  .slider[disabled]:hover {
    cursor: not-allowed;
  }

  .slider[disabled] maui-headline {
    --maui-color-text-copy: var(--maui-color-disabled-foreground);
  }

  .slider[disabled] .value {
    color: var(--maui-color-disabled-foreground);
  }

  .slider-content {
    position: relative;
  }

  .slider-content:hover,
  .track:hover,
  .knob-wrapper:hover,
  .track-wrapper:hover {
    cursor: pointer;
  }

  .slider-input {
    position: relative;
  }

  .value {
    color: var(--maui-color-text-caption, #666);
    font-family: var(--maui-font-family-copy);
    font-style: normal;
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "wl" })};
  }

  .track::before {
    width: var(--slider-progress, 0);
    height: 100%;
    content: '';
    background-color: var(--slider-color);
    position: absolute;
    bottom: 6px;
    left: 0;
    height: 4px;
    pointer-events: none;
  }

  .slider-input.has-focus .knob::after {
    border-radius: 50%;
    bottom: calc(
      var(--maui-focus-outline-offset-y, var(--maui-focus-outline-offset)) * -1
    );
    box-shadow: var(--maui-focus-outline-box-shadow);
    content: ' ';
    left: calc(
      var(--maui-focus-outline-offset-left, var(--maui-focus-outline-offset)) *
        -1
    );
    pointer-events: none;
    position: absolute;
    right: calc(
      var(--maui-focus-outline-offset-right, var(--maui-focus-outline-offset)) *
        -1
    );
    top: calc(
      var(--maui-focus-outline-offset-y, var(--maui-focus-outline-offset)) * -1
    );
    z-index: 1080;
  }
`, $x = s`
  ${Zs("lh")}
`, wx = s`
  .lx {
    --slider-color: var(--maui-color-interaction-buttonprimary);
    --knob-interaction-color: var(--maui-color-interaction-buttonprimaryhover);
    --desktop-wrapper-height: 52px;
    --mobile-wrapper-height: 52px;
  }
  .lx .value {
    ${p({ size: "forms-large", tenant: "lx" })};
  }
`, _x = s`
  .os {
    --knob-interaction-color: var(--maui-color-interaction-buttonprimaryhover);
  }
  .os .value {
    ${p({ size: "forms-large", tenant: "os" })};
  }
  .os.slider .slider-input::before {
    height: 2px;
  }
  .os .knob-tracker {
    top: calc(var(--maui-spacing-4) * -1.1);
  }
`, kx = s`
  .sn {
    --slider-color: var(--maui-color-interaction-interaction);
    --desktop-wrapper-height: 52px;
    --mobile-wrapper-height: 52px;
  }
  .sn .value {
    ${p({ size: "forms-large", tenant: "sn" })};
  }
`, Sx = s`
  ${Zs("b2b")}
  .b2b {
    --slider-color: var(--maui-color-interaction-buttonprimary);
  }
`, Ox = s`
  .four_y {
    --desktop-wrapper-height: 52px;
    --mobile-wrapper-height: 52px;
  }
  .four_y .value {
    color: var(--maui-color-text-label);
    font-size: var(--maui-font-size-4);
  }
`, Mx = s`
  .mmg {
    --slider-color: var(--maui-color-interaction-interaction);
    --desktop-wrapper-height: 52px;
    --mobile-wrapper-height: 52px;
    --knob-size: 22px;
    --knob-size-hover: 22px;
  }

  .mmg.slider {
    gap: var(--maui-line-height-4);
  }

  .mmg.slider .slider-head .headline {
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-color-brand-primary);
  }

  .mmg .value {
    ${p({ size: "forms-large", tenant: "mmg" })};
  }
`, Lx = [
  xx,
  $x,
  wx,
  _x,
  kx,
  Sx,
  Ox,
  Mx
];
var Bx = Object.defineProperty, Cx = Object.getOwnPropertyDescriptor, gt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Cx(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 && Bx(e, t, i), i;
};
class Ee extends Te {
  constructor() {
    super(), this.formControlController = new tt(this), this.min = 0, this.max = 100, this.showTooltip = this.hasFocus, this.sliderRenderCallback = (e) => `Value: ${e}`, this.value = "0", this.componentName = "slider";
  }
  /** Sets focus on the slider. */
  focus() {
    this.handleFocus();
  }
  /** Removes focus from the slider. */
  blur() {
    this.handleBlur();
  }
  /** Formats value to fix floating-point arithmetic issue. */
  formatValue(e) {
    const t = this.steps?.toString()?.split(".")[1]?.length || 0;
    return e.toFixed(t).toString();
  }
  updateValue() {
    const { min: e, max: t } = this, o = t - e;
    this.value = // eslint-disable-next-line no-nested-ternary
    Number(this.value) > t ? t.toString() : Number(this.value) < e ? e.toString() : this.value, this.sliderInput.setAttribute("value", this.value);
    const i = (Number(this.value) - e) / o * 100;
    this.sliderInput.style.setProperty("--slider-progress", `${i}%`), xt(this, "maui-change", { detail: { value: this.value } });
  }
  firstUpdated() {
    super.firstUpdated(), !this.label && !this.headline && console.warn(
      "Please provide a label or headline for the slider component"
    ), this.value = this.value ?? this.min, this.sliderInput.setAttribute("value", this.value.toString()), this.formControlController.updateValidity(), this.updateValue();
  }
  getHeadlineFormat() {
    switch (this.theme) {
      case "lh":
        return "h4";
      case "lx":
        return "h5";
      case "os":
        return "h6";
      case "sn":
        return "h5";
      case "b2b":
        return "h4";
      default:
        return "h4";
    }
  }
  handleTooltip(e) {
    const { type: t } = e, o = ["mouseenter", "focus", "touchstart", "touchmove"];
    e instanceof Event && o.includes(t) ? this.showTooltip = !0 : this.showTooltip = !1;
  }
  getTooltipPlacement() {
    const e = (Number(this.value) - this.min) * 100 / (this.max - this.min), t = window.innerWidth < 768;
    switch (!0) {
      case e < (t ? 15 : 5):
        return "top-start";
      case e > (t ? 85 : 95):
        return "top-end";
      default:
        return "top";
    }
  }
  handleDragStart(e) {
    if (e.type.startsWith("touch"))
      e.preventDefault();
    else if (e.type === "mousedown" && e.button !== 0)
      return;
    const t = this.sliderInput.getBoundingClientRect(), { min: o, max: i, steps: r } = this, n = i - o, c = (v) => {
      const x = v - t.left, _ = Math.max(0, Math.min(100, x / t.width * 100)), $ = this.formatValue(
        Math.round(_ * n / 100 / (r || 1)) * (r || 1) + o
      );
      this.value = $.toString(), this.updateValue();
    }, m = (v) => {
      let x;
      v.type.startsWith("touch") ? (v.preventDefault(), x = v.touches[0].clientX) : x = v.clientX, this.handleFocus(), c(x);
    }, g = () => {
      document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", g), document.removeEventListener("touchmove", m), document.removeEventListener("touchend", g);
    };
    let f = 0;
    e.type.startsWith("touch") ? f = e.touches[0].clientX : f = e.clientX, c(f), document.addEventListener("mousemove", m), document.addEventListener("mouseup", g), document.addEventListener("touchmove", m, { passive: !1 }), document.addEventListener("touchend", g);
  }
  handleTrackClick(e) {
    if (this.disabled)
      return;
    const t = this.sliderInput.getBoundingClientRect(), o = e.clientX - t.left, i = Math.max(0, Math.min(100, o / t.width * 100)), { min: r, max: n, steps: c } = this, m = n - r, g = this.formatValue(
      Math.round(i * m / 100 / (c || 1)) * (c || 1) + r
    );
    this.value = g.toString(), this.updateValue();
  }
  /** Handles keyboard interaction to mimic native range keyinput behavior */
  handleKeys(e) {
    const { key: t } = e, { min: o, max: i, steps: r } = this, n = Number(this.value);
    switch (t) {
      case "ArrowLeft":
      case "ArrowDown":
        e.preventDefault(), this.showTooltip = !0, this.value = this.formatValue(Math.max(o, n - (r || 1)));
        break;
      case "ArrowRight":
      case "ArrowUp":
        e.preventDefault(), this.showTooltip = !0, this.value = this.formatValue(Math.min(i, n + (r || 1)));
        break;
    }
    this.updateValue();
  }
  render() {
    return u`
      <div
        class=${y({
      [this.componentName]: !0,
      [this.theme]: !0
    })}
        ?disabled=${this.disabled}
        aria-disabled=${this.disabled ? "true" : "false"}
        .ariaLabel=${this.label ?? this.headline ?? "Not defined"}
      >
        <div class="slider-head">
          ${this.headline ? u` <maui-headline
                .theme=${this.theme}
                .type=${"h3"}
                .format=${this.getHeadlineFormat()}
              >
                ${this.headline}
              </maui-headline>` : ""}
          <span class="value"> ${this.sliderRenderCallback(this.value)} </span>
        </div>
        <input
          type="range"
          id=${`${this.name}-hidden`}
          name=${this.name}
          .value=${this.value}
          min=${this.min}
          max=${this.max}
          ?required=${this.required}
          ?disabled=${this.disabled}
          class="hidden-input validation-input"
          tabindex="-1"
          aria-hidden="true"
        />
        <label class="input-label" for=${this.name}>
          <div
            class=${y({
      "slider-input": !0,
      "has-focus": this.hasFocus,
      "validation-input": !0
    })}
            min=${this.min}
            max=${this.max}
            step=${U(this.steps)}
            .required=${this.required}
            .disabled=${this.disabled}
          >
            <div class="slider-content">
              <maui-tooltip
                .theme=${this.theme}
                ?is-box-open=${this.showTooltip}
                ?show-arrow=${!0}
                .placement=${this.getTooltipPlacement()}
                .type=${"small"}
                .aria-label=${this.sliderRenderCallback(this.value)}
              >
                <span slot="box" aria-hidden="true"
                  >${this.sliderRenderCallback(this.value)}</span
                >
                <div
                  class="knob-wrapper"
                  slot="trigger"
                  @mousedown=${this.handleDragStart}
                  @touchstart=${(e) => {
      this.handleDragStart(e), this.handleTooltip(e);
    }}
                  @touchmove=${this.handleTooltip}
                  @touchend=${this.handleTooltip}
                >
                  <div
                    class="knob"
                    .name=${this.name}
                    aria-disabled=${this.disabled ? "true" : "false"}
                    aria-valuenow=${this.value}
                    aria-valuetext=${this.sliderRenderCallback(this.value)}
                    aria-valuemin=${this.min}
                    aria-valuemax=${this.max}
                    aria-label=${this.label ?? this.headline ?? "Not defined"}
                    .ariaDisabled=${this.disabled ? "true" : "false"}
                    role="slider"
                    @input=${this.updateValue}
                    @mouseenter=${this.handleTooltip}
                    @mouseleave=${this.handleTooltip}
                    @keypress=${this.handleKeys}
                    @keydown=${this.handleKeys}
                    tabindex=${this.disabled ? "-1" : "0"}
                  ></div>
                </div>
              </maui-tooltip>
            </div>
            <div
              class="track-wrapper"
              @click=${this.handleTrackClick}
              @keydown=${(e) => e.preventDefault()}
            >
              <div class="track"></div>
            </div>
          </div>
        </label>
      </div>
    `;
  }
}
Ee.styles = Lx;
gt([
  M(".slider-input")
], Ee.prototype, "sliderInput", 2);
gt([
  M(".knob")
], Ee.prototype, "knob", 2);
gt([
  l({ type: String, reflect: !0 })
], Ee.prototype, "headline", 2);
gt([
  l({ type: Number })
], Ee.prototype, "min", 2);
gt([
  l({ type: Number })
], Ee.prototype, "max", 2);
gt([
  l({ type: Number, reflect: !0 })
], Ee.prototype, "steps", 2);
gt([
  l({ type: Boolean, reflect: !0 })
], Ee.prototype, "disabled", 2);
gt([
  l({ type: String, reflect: !0 })
], Ee.prototype, "label", 2);
gt([
  O({})
], Ee.prototype, "showTooltip", 2);
gt([
  l({ type: Object, attribute: "slider-render-callback" })
], Ee.prototype, "sliderRenderCallback", 2);
w("maui-slider", Ee);
const zx = (a) => {
  const e = h(a);
  return s`
    .${e}.disabled .trigger-label {
      transition: none;
    }

    .${e}.select.stepper-select {
      padding-top: 0; /* override label height spacer */
    }

    .${e} .trigger {
      color: var(--maui-color-text-caption);
      border-top: 2px solid var(--maui-color-interaction-buttonsecondary);
    }

    .${e}.has-value:not(.disabled, .has-focus, .has-error,) .trigger {
      --maui-select-button-color: var(--maui-select-button-color-value);
      border-top: 2px solid var(--maui-color-interaction-buttonsecondary);
      border-bottom: 2px solid var(--maui-color-interaction-buttonsecondary);
    }

    .${e}:not(.has-value, .disabled, .has-error) .trigger {
      border-top: 2px solid var(--maui-color-grey-07);
      border-bottom: 2px solid var(--maui-color-grey-07);
    }

    .${e}.has-focus:not(.disabled, .has-error) .trigger {
      border: 2px solid var(--maui-color-interaction-buttonsecondary);
      box-shadow: 0px 0px 6px 1px var(--maui-color-interaction-interaction);
    }

    .${e}.has-error:not(.disabled) .trigger {
      border-top: 2px solid var(--maui-color-message-error);
      border-bottom: 2px solid var(--maui-color-message-error);
    }
    .${e}.has-error.has-focus:not(.disabled) .trigger {
      border: 2px solid var(--maui-color-message-error);
      --maui-focus-outline-box-shadow: none;
      box-shadow: 0px 0px 6px 1px var(--maui-color-message-error);
    }

    .${e}.disabled .trigger {
      border-top: 2px solid var(--maui-color-disabled-foreground);
      border-bottom: 2px solid var(--maui-color-disabled-foreground);
      cursor: not-allowed;
    }

    .${e}.disabled .trigger-label {
      color: var(--maui-color-disabled-foreground);
    }
  `;
}, Ax = s`
  ${Ys}
  ${C}
  ${A}

  .dropdown-list {
    text-align: center;
  }

  ${H("select", "has-focus", "trigger")}

  .stepper .has-error {
    --maui-icon-color-override: var(--maui-color-message-error);
  }

  .stepper-select.is-open .trigger-label {
    --maui-select-trigger-label-padding-focus: 0;
  }

  .stepper-select .result-list {
    left: -40px;
    right: -40px;
    width: auto;
  }

  .stepper-select .trigger {
    border-width: 2px 0 2px;
    display: flex;
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 40px;
  }

  .disabled,
  .disabled .trigger {
    cursor: not-allowed;
  }
`, Fx = s`
  ${Ts}
  ${zx("lh")}

  .lh.disabled .trigger {
    border-bottom-color: var(--maui-color-disabled-foreground);
  }

  .lh.has-focus .trigger-label {
    padding: 0;
  }
`, Nx = s`
  ${qs}
  .b2b.disabled .trigger-label {
    transition: none;
  }

  .b2b .trigger {
    color: var(--maui-color-text-caption);
    border-top: 2px solid var(--maui-color-interaction-buttonprimary);
  }

  .b2b.has-value:not(.disabled, .has-focus, .has-error, ) .trigger {
    --maui-select-button-color: var(--maui-select-button-color-value);
    border-top: 2px solid var(--maui-color-interaction-buttonprimary);
    border-bottom: 2px solid var(--maui-color-interaction-buttonprimary);
  }

  .b2b:not(.has-value, .disabled, .has-error) .trigger {
    border-top: 2px solid var(--maui-color-grey-07);
    border-bottom: 2px solid var(--maui-color-grey-07);
  }

  .b2b.has-focus:not(.disabled, .has-error) .trigger {
    border: 2px solid var(--maui-color-interaction-buttonprimary);
    box-shadow: 0px 0px 6px 1px var(--maui-color-interaction-interaction);
  }

  .b2b.has-error:not(.disabled) .trigger {
    border-top: 2px solid var(--maui-color-message-error);
    border-bottom: 2px solid var(--maui-color-message-error);
  }
  .b2b.has-error.has-focus:not(.disabled) .trigger {
    border: 2px solid var(--maui-color-message-error);
    --maui-focus-outline-box-shadow: none;
    box-shadow: 0px 0px 6px 1px var(--maui-color-message-error);
  }

  .b2b.disabled .trigger {
    border-top: 2px solid var(--maui-color-disabled-foreground);
    border-bottom: 2px solid var(--maui-color-disabled-foreground);
    cursor: not-allowed;
  }

  .b2b.disabled .trigger-label {
    color: var(--maui-color-disabled-foreground);
  }

  .b2b.has-focus .trigger-label {
    padding: 0;
  }
`, Ix = s`
  ${Xs}

  .os.has-focus {
    --maui-focus-radius: 2px;
  }

  .os .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 50px;
    padding: 0px 5px;
  }

  .os.has-value .trigger-label {
    padding: 0;
  }

  .os.disabled .trigger-label {
    color: var(--maui-color-grey-04);
  }

  .os .trigger {
    border-radius: 3px;
    background: var(--maui-color-grey-02);
    color: var(--maui-color-text-copy);
    align-items: center;
  }
`, Ux = s`
  ${Vs}

  .lx.has-focus {
    --maui-focus-radius: 2px;
  }

  .lx .trigger {
    border-top: 1px solid var(--maui-color-grey-02);
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--maui-color-grey-02);
    padding-top: 5px;
  }

  .lx.has-value .trigger-label {
    padding: 0;
  }

  .lx.has-error:not(.disabled) .trigger-label {
    color: var(--maui-color-message-error);
  }

  .lx.has-error:not(.disabled) .trigger {
    border-color: var(--maui-color-message-error);
  }

  .lx.is-open.has-error:not(.disabled) .trigger {
    border: 1px solid var(--maui-color-message-error);
  }

  .lx.is-open:not(.disabled, .has-errror) .trigger {
    border: 1px solid var(--maui-color-interaction-buttonsecondary);
  }
`, Rx = s`
  ${js}

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

  .sn .trigger {
    border-top: 1px solid var(--maui-color-grey-07);
    border-bottom: 1px solid var(--maui-color-grey-07);
  }

  .sn.has-value .trigger-label {
    padding: 0;
  }

  .sn.is-open .trigger {
    border: 1px solid var(--maui-color-interaction-buttonsecondary);
  }

  .sn.disabled .trigger {
    border-color: var(--maui-color-disabled-foreground);
  }

  .sn.has-error:not(.disabled) .trigger {
    border-color: var(--maui-color-message-error);
  }

  .sn.disabled .trigger-label {
    color: var(--maui-color-disabled-foreground);
  }
`, Dx = s`
  ${Ks}

  .four_y .trigger-label {
    color: var(--maui-color-text-copy);
  }

  .four_y .trigger {
    border-radius: var(--maui-radii-radius-2);
    --maui-focus-radius: calc(
      var(--maui-radii-radius-2) + var(--maui-radii-focus-offset)
    );
  }

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

  .four_y.stepper-select .trigger {
    width: 40px;
  }

  .four_y.has-value .trigger-label {
    padding: 0;
  }

  .four_y.stepper-select .result-list {
    width: auto;
    margin-inline: 0;
    left: calc(-1 * (40px + var(--maui-spacing-2)));
    right: calc(-1 * (40px + var(--maui-spacing-2)));
  }

  .four_y.disabled .trigger {
    background-color: var(--maui-color-disabled-background);
    border-color: var(--maui-color-disabled-foreground);
  }

  .four_y.has-error:not(.disabled) .trigger {
    color: var(--maui-color-message-error);
  }

  .four_y.disabled .trigger-label {
    color: var(--maui-color-disabled-foreground);
  }
`, Ex = s`
  ${Ws}

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

  .mmg .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 50px;
    padding: 0px 5px;
  }

  .mmg.has-value .trigger-label {
    padding: 0;
  }

  .mmg.disabled .trigger-label {
    color: var(--maui-color-grey-04);
  }

  .mmg .trigger {
    border: 1px solid var(--maui-color-grey-07);
    background: var(--maui-color-brand-light);
    color: var(--maui-color-text-caption);
    align-items: center;
  }

  .mmg.has-focus .trigger {
    border-color: var(--maui-color-interaction-interactionhover);
    border-width: var(--maui-spacing-0);
  }

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

  .mmg.stepper-select .result-list {
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
  }
`, Px = [
  Ax,
  Fx,
  Nx,
  Ix,
  Ux,
  Rx,
  Dx,
  Ex
];
class Qs extends V {
  constructor() {
    super("select stepper-select");
  }
  setAriaLabelFromExternalLabel() {
    return this.buttonTriggerLabel;
  }
  handleDocumentKeyDown(e) {
    super.handleDocumentKeyDown(e), super.letterSearch(e);
  }
  renderHintOrError() {
    const e = u`
      <div aria-live="polite" aria-relevant="additions" aria-atomic="true">
        ${!this.disabled && this.errorMessage && this.hasError ? u`<maui-error-highlight
              .theme=${this.theme}
              id="${this.id}-error"
              class="sr-only"
              >${this.errorMessage}</maui-error-highlight
            >` : ""}
      </div>
      ${(!this.hasError || this.disabled) && this.hint ? u`<maui-hint
            .theme=${this.theme}
            id="${this.id}-hint"
            class="sr-only"
            >${this.hint}</maui-hint
          >` : ""}
    `;
    return u`<div class="hint-error-box">${e}</div>`;
  }
}
Qs.styles = Px;
w("maui-stepper-select", Qs);
const Hx = (a) => {
  const e = h(a);
  return s`
    .${e} .controlbutton {
      border-color: var(--maui-color-interaction-buttonsecondary);
      --maui-icon-color-override: var(--maui-color-grey-07);
    }

    .${e} .controlbutton[disabled] {
      --maui-icon-color-override: var(--maui-color-disabled-foreground);
    }

    .${e}:not(.has-value, .disabled, .has-error) .controlbutton {
      border-color: var(--maui-color-grey-07);
    }

    .${e}.has-error:not(.disabled) .controlbutton {
      border-color: var(--maui-color-message-error);
    }

    .${e}.disabled .controlbutton {
      border-color: var(--maui-color-disabled-foreground);
      --maui-icon-color-override: var(--maui-color-disabled-foreground);
    }

    .${e}.disabled .info-wrapper {
      cursor: not-allowed;
    }

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

    .${e} .label,
    .${e} .info-wrapper {
      ${d({ size: "copy-small", tenant: a })};
    }
  `;
}, Gx = s`
  ${C}

  .stepper {
    display: flex;
    flex-direction: column;
    gap: 6px;

    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "wl" })};
  }

  .stepper > div {
    display: flex;
  }

  .label,
  .info-wrapper {
    ${d({ size: "copy-small", tenant: "wl" })};
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-grey-07);
  }

  .controlbutton {
    width: 40px;
    height: 40px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s, border 0.3s;
    --maui-hover-transition: fill 0.3s;
  }

  .stepper:not(.disabled) .controlbutton:hover {
    background: var(--maui-color-interaction-buttonsecondary);
    --maui-icon-color-override: var(--maui-color-brand-white);
    border-color: transparent;
  }

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

  .controlbutton:focus-visible {
    outline: none;
  }

  .stepper .minus {
    border: 2px solid;
    border-right-width: 0;
  }
  .stepper .plus {
    border: 2px solid;
    border-left-width: 0;
  }

  .disabled .label,
  .disabled .hint {
    --maui-label-color-override: var(--maui-color-disabled-foreground);
    --maui-hint-color-override: var(--maui-color-disabled-foreground);
    cursor: not-allowed;
  }
`, Yx = s`
  ${Hx("lh")}
`, Tx = s`
  .b2b .controlbutton {
    border-color: var(--maui-color-interaction-buttonprimary);
    --maui-icon-color-override: var(--maui-color-grey-07);
  }

  .b2b .controlbutton[disabled] {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .b2b:not(.has-value, .disabled, .has-error) .controlbutton {
    border-color: var(--maui-color-grey-07);
  }

  .b2b.has-error:not(.disabled) .controlbutton {
    border-color: var(--maui-color-message-error);
  }

  .b2b.disabled .controlbutton {
    border-color: var(--maui-color-disabled-foreground);
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .b2b.disabled .info-wrapper {
    cursor: not-allowed;
  }

  .b2b.stepper:not(.disabled) .controlbutton:hover {
    background: var(--maui-color-interaction-buttonprimary);
  }

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

  .b2b .label,
  .b2b .info-wrapper {
    ${d({ size: "copy-small", tenant: "b2b" })};
  }
`, Xx = s`
  .lx .controlbutton {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
    border-color: var(--maui-color-grey-02);
  }

  .lx .controlbutton[disabled] {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .lx .minus {
    border-width: 1px 0 1px 1px;
  }

  .lx .plus {
    border-width: 1px 1px 1px 0;
  }

  .lx.has-error:not(.disabled) .controlbutton {
    border-color: var(--maui-color-message-error);
  }

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

  .lx .label,
  .lx .info-wrapper {
    ${d({ size: "copy-small", tenant: "lx" })};
  }
`, Vx = s`
  .os {
    line-height: var(--maui-line-height-1);
  }

  .os .controlbutton {
    border: 1px solid var(--maui-color-grey-02);
    --maui-icon-color-override: var(--maui-color-grey-07);
    border-radius: 3px;
  }

  .os button[disabled] {
    --maui-icon-color-override: var(--maui-color-grey-04);
  }

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

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

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

  .os .label,
  .os .info-wrapper {
    ${d({ size: "copy-small", tenant: "os" })};
  }
`, jx = s`
  .sn .controlbutton {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .sn button[disabled] {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .sn .minus {
    border: 1px solid;
    border-color: var(--maui-color-grey-07);

    border-right-width: 0;
  }
  .sn .plus {
    border: 1px solid;
    border-color: var(--maui-color-grey-07);
    border-left-width: 0;
  }

  .sn.disabled .controlbutton {
    border-color: var(--maui-color-disabled-foreground);
  }

  .sn.has-error:not(.disabled) .controlbutton {
    border-color: var(--maui-color-message-error);
  }

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

  .sn .label,
  .sn .info-wrapper {
    ${d({ size: "copy-small", tenant: "sn" })};
  }
`, qx = s`
  .four_y.stepper > div {
    gap: var(--maui-spacing-2);
  }

  .four_y .controlbutton {
    --maui-icon-color-override: var(--maui-color-brand-light);
    border-radius: var(--maui-radii-radius-2);
  }

  .four_y button[disabled] {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .four_y.stepper:not(.disabled) .controlbutton:not([disabled]) {
    border: 2px solid var(--maui-color-grey-01);
    background-color: var(--maui-color-brand-light);
    --maui-icon-color-override: var(--maui-color-text-copy);
  }

  .four_y.stepper:not(.disabled) .controlbutton:not([disabled]):hover {
    border-color: var(--maui-color-interaction-buttonsecondaryhover);
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .four_y.stepper.disabled .controlbutton,
  .four_y.stepper .controlbutton[disabled] {
    background-color: var(--maui-color-brand-light);
    border: 2px solid var(--maui-color-grey-01);
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .four_y.stepper {
    ${p({ size: "forms-large", tenant: "four_y" })};
  }
`, Kx = s`
  .mmg {
    line-height: var(--maui-line-height-1);
  }

  .mmg .controlbutton {
    border: none;
    --maui-icon-color-override: var(--maui-color-brand-primary);
    border-radius: 2px;
  }

  .mmg.stepper:not(.disabled) .controlbutton:hover {
    background-color: var(--maui-color-interaction-interactionhover);
    border-color: var(--maui-color-interaction-interactionhover);
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .mmg button[disabled] {
    --maui-icon-color-override: var(--maui-color-grey-04);
  }

  .mmg .label {
    --maui-label-color-override: var(--maui-color-text-copy);
  }

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

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

  .mmg .label,
  .mmg .info-wrapper {
    ${d({ size: "copy-small", tenant: "os" })};
  }
`, Wx = [
  Gx,
  Yx,
  Tx,
  Xx,
  Vx,
  jx,
  qx,
  Kx
];
var Zx = Object.defineProperty, Qx = Object.getOwnPropertyDescriptor, ie = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Qx(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 && Zx(e, t, i), i;
};
const K = class Js extends Te {
  constructor() {
    super(), this.formControlController = new tt(this), this.hasSlotController = new be(
      this,
      ...Js.slots
    ), this.observers = [], this.slotObservers = {
      hint: void 0,
      error: void 0
    }, this._label = "", this.errorMessageContent = "", this.hintContent = "", this.label = "", this.hint = "", this.mode = "disabled", this.componentName = "stepper";
  }
  connectedCallback() {
    super.connectedCallback(), this.selected = this.selected ?? this.min, this.value = String(this.selected);
  }
  disconnectedCallback() {
    this.clearObservers(), super.disconnectedCallback();
  }
  updated(e) {
    this.min === void 0 && (this.min = 0), this.max === void 0 && (this.max = 0), this.selected === void 0 && (this.selected = 0), (e.has("min") || e.has("max") || e.has("selected")) && (this.min > this.max && (this.max = this.min, this.selected = this.min, this.emit("maui-boundary-reached", {
      detail: {
        boundary: "min",
        value: this.selected
      }
    })), this.selected > this.max && (this.selected = this.max, this.emit("maui-boundary-reached", {
      detail: {
        boundary: "max",
        value: this.selected
      }
    })), this.selected < this.min && (this.selected = this.min, this.emit("maui-boundary-reached", {
      detail: {
        boundary: "min",
        value: this.selected
      }
    })), this.optionsSlot.assignedNodes().length === 0 && this.stepperSelect.shadowRoot?.querySelector("slot")?.dispatchEvent(new Event("slotchange")));
  }
  decrement() {
    this.selected > this.min ? (this.selected = Math.max(this.min, this.selected - 1), this.updateStepperSelect()) : this.emit("maui-boundary-reached", {
      detail: {
        boundary: "min",
        value: this.selected
      }
    });
  }
  increment() {
    this.selected < this.max ? (this.selected = Math.min(this.selected + 1, this.max), this.updateStepperSelect()) : this.emit("maui-boundary-reached", {
      detail: {
        boundary: "max",
        value: this.selected
      }
    });
  }
  focus(e) {
    this.handleFocus(), this.stepperSelect.focus(e);
  }
  blur() {
    this.handleBlur(), this.stepperSelect.blur();
  }
  /**
   * select according option after clicking the increment or decrement button
   */
  updateStepperSelect() {
    this.stepperSelect.selected = String(this.selected), this.value = String(this.selected);
  }
  handleSlotChange(e) {
    const t = e?.target || this.optionsSlot;
    X(t, ["MAUI-OPTION"]);
  }
  handleOptionSelection(e) {
    this.selected = parseInt(e.detail.value, 10), this.value = String(this.selected);
  }
  clearObservers() {
    this.observers.forEach((e) => e.disconnect());
  }
  updateLabel() {
    const e = (this.ariaLabelledBy ? this.ariaLabelledBy : "").split(" ").map((t) => t && Qi(`#${t}`, this, !0)?.textContent || "").filter((t) => t).join(" ");
    this._label = `${this.label ? `${this.label}` : ""}${this.label && e ? " " : ""}${e ? `${e}` : ""}`, this._label === "" && (this.label = "MISSING LABEL");
  }
  labelChanged() {
    this.updateLabel();
  }
  ariaLabelledByChanged() {
    if (this.clearObservers(), this.ariaLabelledBy !== "")
      for (const e of this.ariaLabelledBy.split(" ")) {
        const t = Qi(`#${e}`, this, !0);
        if (t) {
          const o = new MutationObserver((i) => {
            i.length > 0 && this.updateLabel();
          });
          o.observe(t, {
            attributes: !0,
            characterData: !0,
            subtree: !0,
            childList: !0
          }), this.observers.push(o);
        }
      }
    this.updateLabel();
  }
  handleErrorHintSlotChange(e) {
    const t = e?.target, o = t.name;
    this.slotObservers[o]?.disconnect(), this.slotObservers[o] = new MutationObserver((i) => {
      i.length > 0 && this.updateSlot();
    }), t?.assignedNodes()?.forEach((i) => {
      this.slotObservers[o].observe(i, {
        childList: !0,
        subtree: !0,
        characterData: !0
      });
    }), this.updateSlot();
  }
  updateSlot() {
    const e = this.hintSlot?.assignedNodes({ flatten: !0 }).map((o) => o.textContent).join("");
    this.hintContent = e;
    const t = this.errorSlot?.assignedNodes({ flatten: !0 }).map((o) => o.textContent).join("");
    this.errorMessageContent = t;
  }
  render() {
    const e = this.hasSlotController.test("hint"), t = !!this.hint, o = this.hasSlotController.test("error"), { hasError: i } = this, r = !this.externalErrorOrHint && (!!e || !!t || (!!i || !!o) && !this.disabled), n = this.id ? this.id : "defaultStepperID";
    let c;
    o ? c = u`<slot
        id="${n}-error"
        name="error"
        @slotchange=${this.handleErrorHintSlotChange}
        >Error Slot</slot
      >` : this.hasError && this.errorMessage && (c = u`<maui-error-highlight
        .theme=${this.theme}
        id="${n}-error"
        class="error"
        >${this.errorMessage}</maui-error-highlight
      >`);
    const m = this._label || "MISSING LABEL";
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      "has-error": i || o,
      "has-value": this.value && this.value !== "0",
      disabled: !!this.disabled
    })}
      ?disabled=${this.disabled}
    >
      ${this.ariaLabelledBy ? E : u`<maui-label
            .theme=${this.theme}
            id="${this.id}-label"
            class="label"
            for=${n}
            >${m}</maui-label
          >`}
      <div>
        <button
          class="minus controlbutton"
          @click=${this.decrement}
          tabindex="-1"
          aria-hidden="true"
          ?disabled=${this.disabled || this.mode === "disabled" && this.selected === this.min}
        >
          <maui-icon .theme=${this.theme} use="icon-minus"></maui-icon>
        </button>
        <maui-stepper-select
          class=${y({
      [this.componentName]: !0,
      [this.theme]: !0
    })}
          .theme=${this.theme}
          selected=${U(this.selected)}
          .id="${n}"
          buttonTriggerLabel=${m}
          ?disabled=${this.disabled}
          ?hasError=${this.hasError || o}
          .errorMessage=${this.errorMessage || this.errorMessageContent}
          .hint=${this.hint || this.hintContent}
          @maui-change=${this.handleOptionSelection}
        >
          <slot name="options" @slotchange=${this.handleSlotChange}>
            ${Array.from(
      { length: this.max - this.min + 1 },
      (g, f) => {
        const v = f + this.min, x = v === this.selected;
        return u` <maui-option
                  .theme=${this.theme}
                  ?selected=${x}
                  optionValue=${v}
                  >${v}</maui-option
                >`;
      }
    )}
          </slot>
        </maui-stepper-select>
        <button
          class="plus controlbutton"
          @click=${this.increment}
          tabindex="-1"
          aria-hidden="true"
          ?disabled=${this.disabled || this.mode === "disabled" && this.selected === this.max}
        >
          <maui-icon .theme=${this.theme} use="icon-plus"></maui-icon>
        </button>
      </div>
      ${r ? u`<div class="info-wrapper" aria-hidden="true">
            ${(t || e) && (!i && !o || this.disabled) ? u`<div id="${n}-hint" class="hint">
                  ${e ? u`<slot
                        name="hint"
                        @slotchange=${this.handleErrorHintSlotChange}
                      ></slot>` : u`<maui-hint .theme=${this.theme} class="hint"
                        >${this.hint}</maui-hint
                      >`}
                </div>` : ""}
            ${this.disabled ? "" : c}
          </div>` : ""}
    </div>`;
  }
};
K.styles = Wx;
K.slots = ["hint", "error"];
ie([
  M('slot[name="options"]')
], K.prototype, "optionsSlot", 2);
ie([
  M('slot[name="hint"]')
], K.prototype, "hintSlot", 2);
ie([
  M('slot[name="error"]')
], K.prototype, "errorSlot", 2);
ie([
  M("maui-stepper-select")
], K.prototype, "stepperSelect", 2);
ie([
  O()
], K.prototype, "_label", 2);
ie([
  O()
], K.prototype, "errorMessageContent", 2);
ie([
  O()
], K.prototype, "hintContent", 2);
ie([
  l({ reflect: !0, converter: Number })
], K.prototype, "min", 2);
ie([
  l({ reflect: !0, converter: Number })
], K.prototype, "max", 2);
ie([
  l({ reflect: !0, converter: Number })
], K.prototype, "selected", 2);
ie([
  l()
], K.prototype, "label", 2);
ie([
  l()
], K.prototype, "hint", 2);
ie([
  l({ type: Boolean, reflect: !0 })
], K.prototype, "disabled", 2);
ie([
  l({ type: String })
], K.prototype, "mode", 2);
ie([
  l({ type: String, reflect: !0, attribute: "aria-labelledby" })
], K.prototype, "ariaLabelledBy", 2);
ie([
  l({ type: Boolean, reflect: !0 })
], K.prototype, "externalErrorOrHint", 2);
ie([
  F("label")
], K.prototype, "labelChanged", 1);
ie([
  F("ariaLabelledBy")
], K.prototype, "ariaLabelledByChanged", 1);
let Jx = K;
w("maui-stepper", Jx);
const e0 = s`
  ${A}

  nav {
    --maui-tabcontrol-scroll-overflow-fix: 20px;
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    position: relative;
    padding: var(--maui-tabcontrol-scroll-overflow-fix)
      calc(
        var(--maui-tabcontrol-scroll-overflow-fix) +
          var(--maui-tab-control-ejection-internal, 0px)
      );
    margin: calc(var(--maui-tabcontrol-scroll-overflow-fix) * -1);
    scroll-padding: var(--maui-tabcontrol-scroll-overflow-fix);
  }

  .tab-control:not(.ejected) nav {
    width: 100%;
  }

  .tab:not(.transparent) {
    background: var(--maui-color-brand-light);
  }

  .tab:not([active]) {
    cursor: pointer;
  }

  .tab {
    scroll-snap-align: start;

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--maui-spacing-3);
    padding: var(--maui-tab-control-tab-padding, var(--maui-spacing-4));
    font-family: var(--maui-font-family-copy);
    ${d({ size: "copy-large", tenant: "wl" })};
    text-align: center;

    font-weight: var(--maui-font-weight-regular);

    transition: color 0.3s ease-in-out;
    color: var(--maui-tab-control-tab-text-color, var(--maui-color-grey-07));

    --maui-icon-color-override: var(
      --maui-tab-control-tab-text-color,
      var(--maui-color-grey-07)
    );
  }

  .tab.spread {
    flex-grow: 1;
    justify-content: center;
  }

  .tab.compact {
    padding: var(
      --maui-tab-control-tab-padding-compact,
      calc(var(--maui-spacing-3) + var(--maui-spacing-2)) var(--maui-spacing-4)
    );
  }

  .tab[active] {
    font-weight: var(--maui-font-weight-bold);
    color: var(
      --maui-tab-control-tab-text-color-active,
      var(--maui-color-interaction-buttonsecondary)
    );

    --maui-icon-color-override: var(
      --maui-tab-control-tab-text-color-active,
      var(--maui-color-interaction-buttonsecondary)
    );
  }

  .tabspacer {
    flex-grow: 1;
  }

  .tabspacer:not(.transparent) {
    background-color: var(--maui-color-brand-light);
  }

  .icon {
    pointer-events: none;
  }

  .label-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    pointer-events: none;
    white-space: nowrap;
  }

  .indicator-wrapper {
    width: calc(100% - 2 * var(--maui-tabcontrol-scroll-overflow-fix));
    position: absolute;
    left: 0;
    bottom: var(--maui-tabcontrol-scroll-overflow-fix);
    z-index: 1;
  }

  .label:not(.font-weight-fix) {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
    text-align: left;
  }

  .label.font-weight-fix {
    position: relative;
    white-space: nowrap;
    font-weight: var(--maui-font-weight-bold);
    opacity: 0;
  }

  .nav-wrapper {
    position: relative;
    border-bottom: 1px solid var(--maui-color-grey-04);
  }

  .indicator {
    position: absolute;
    pointer-events: none;
    display: block;
    height: var(--maui-tab-control-indicator-height, 4px);
    width: var(--maui-tab-control-indicator-width, 0);
    transition: left 0.15s ease-in-out, width 0.15s ease-in-out;
    background-color: var(
      --maui-tab-control-indicator-color,
      var(--maui-color-interaction-buttonsecondary)
    );
    left: var(--maui-tab-control-indicator-offset, 0);
    bottom: -1px;
  }

  @media screen and (max-width: ${S["mini-tablet"]["max-width"]}px) {
    .tab.icon-only-mobile {
      gap: 0;
    }

    .tab.icon-only-mobile .label-wrapper:not(.no-icon) {
      opacity: 0;
      width: 0;
      height: 0;
      overflow: hidden;
    }
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .ejected {
      --maui-tab-control-ejection-internal: var(
        --maui-tab-control-ejection,
        var(--maui-spacing-10)
      );
    }
  }

  ${H("tab")}
`, t0 = s`
  .lh .tab {
    ${p({ size: "forms-large", tenant: "lh" })};
  }

  .lh .tab.compact {
    ${p({ size: "forms-medium", tenant: "lh" })};
  }
`, o0 = s`
  .os {
    --maui-tab-control-tab-text-color: var(--maui-color-text-copy);
    --maui-tab-control-tab-text-color-active: var(
      --maui-color-interaction-buttonprimary
    );
  }

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

  .os .label-wrapper {
    text-transform: uppercase;
    ${d({ size: "copy-medium", tenant: "os" })};
    font-weight: var(--maui-font-weight-bold);
  }
`, i0 = s`
  .lx {
    --maui-tab-control-tab-text-color: var(
      --maui-color-interaction-interaction
    );
    --maui-tab-control-tab-text-color-active: var(--maui-color-text-copy);
  }

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

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

  .lx .indicator {
    --maui-tab-control-indicator-color: var(
      --maui-color-interaction-buttonprimary
    );
  }
`, a0 = s`
  .sn {
    --maui-tab-control-tab-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-tab-control-tab-text-color-active: var(
      --maui-color-interaction-buttonsecondary
    );
  }

  .sn .tab {
    --maui-focus-radius: 0;
    ${p({ size: "forms-large", tenant: "sn" })};
  }

  .sn .tab.compact {
    ${p({ size: "forms-medium", tenant: "sn" })};
  }
`, r0 = s`
  .b2b .tab[active] {
    font-weight: var(--maui-font-weight-bold);
    --maui-tab-control-tab-text-color-active: var(
      --maui-color-interaction-buttonprimary
    );
  }

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

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

  .b2b {
    --maui-tab-control-indicator-color: var(
      --maui-color-interaction-buttonprimary
    );
  }
`, n0 = s`
  .four_y {
    --maui-tab-control-tab-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-tab-control-tab-text-color-active: var(
      --maui-color-interaction-buttonsecondary
    );

    --maui-tab-control-tab-padding: calc(var(--maui-spacing-4) - 5px) 20px;
    --maui-tab-control-tab-padding-compact: var(--maui-spacing-3)
      calc(var(--maui-spacing-3) + var(--maui-spacing-2));
  }

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

    --maui-focus-outline-offset: 3px;
    --maui-focus-outline-offset-y: 4px;
  }

  .four_y .tab::after {
    transform: translateY(1px);
  }

  .four_y .tab.compact {
    ${p({ size: "forms-medium", tenant: "four_y" })};
    --maui-focus-outline-offset: 3px;
    --maui-focus-outline-offset-y: 6px;
  }

  .four_y .tab.compact::after {
    transform: translateY(-1px);
  }

  .four_y .nav-wrapper {
    border-bottom: 2px solid var(--maui-color-brand-light-sky-blue);
  }

  .four_y .indicator {
    bottom: 0;
  }
`, s0 = s`
  .mmg {
    --maui-tab-control-tab-text-color: var(
      --maui-color-interaction-interaction
    );
    --maui-tab-control-tab-text-color-active: var(
      --maui-color-interaction-interactionhover
    );
    --maui-tab-control-indicator-color: var(
      --maui-color-interaction-interactionhover
    );
  }

  .mmg .tab {
    ${p({ size: "forms-large", tenant: "mmg" })};
    padding-inline: var(--maui-spacing-3);
  }

  .mmg .tab:hover {
    --maui-tab-control-tab-text-color: var(
      --maui-color-interaction-interactionhover
    );
  }

  .mmg .label-wrapper {
    ${d({ size: "copy-large", tenant: "mmg" })};
    font-weight: var(--maui-font-weight-bold);
  }
`, l0 = [
  e0,
  t0,
  o0,
  i0,
  a0,
  r0,
  n0,
  s0
];
var c0 = Object.defineProperty, d0 = Object.getOwnPropertyDescriptor, qe = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? d0(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 && c0(e, t, i), i;
};
class Ae extends k {
  constructor() {
    super(), this.controlId = $a(), this.indicatorWidth = 0, this.indicatorOffset = 0, this.initiallyActive = 0, this.compactTabs = !1, this.transparentTabs = !1, this.iconOnlyMobile = !1, this.spreadTabs = !1, this.variant = "contained", this.addEventListener("maui-update", this.handleMauiUpdate.bind(this)), this.componentName = "tab-control";
  }
  handleTabChange() {
    setTimeout(() => {
      this.updateIndicator();
    }, 0);
  }
  connectedCallback() {
    super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        this.updateIndicator();
      }, 100);
    }), this.updateComplete.then(() => {
      this.resizeObserver.observe(this.nav), this.setIds(), this.setActivePanel(), this.updateIndicator();
    });
  }
  handleMauiUpdate(e) {
    e.stopPropagation(), this.requestUpdate();
  }
  disconnectedCallback() {
    this.resizeObserver.unobserve(this.nav), this.removeEventListener("maui-update", this.handleMauiUpdate);
  }
  setActivePanel(e, t) {
    const o = e ? !!this.querySelector(`#${e.getAttribute("id")}`) : !1;
    e && o ? (this.emit("maui-before-change", { detail: e }), setTimeout(() => {
      this.getAllPanels().forEach((i) => {
        if (i === e) {
          i.setAttribute("active", "");
          return;
        }
        i.removeAttribute("active");
      }), this.activePanel = e, t?.emitEvents && this.emit("maui-change", { detail: e });
    })) : this.getAllPanels().forEach((i, r) => {
      if (r === this.initiallyActive) {
        i.setAttribute("active", ""), this.activePanel = i;
        return;
      }
      i.removeAttribute("active");
    }), this.requestUpdate();
  }
  updateIndicator()