olor-brand-black);
  }
`, $2 = s`
  .sn {
    --step-button-padding: 6px 8px;
    --step-list-margin: 7px 11px 0px;
    --column-margin: 7px 7px 0;
    --step-button-box-padding: 0 0 15px 0;
    --expandable-extra-pane-height: 0px;
  }

  .sn .step {
    color: var(--maui-color-grey-05);

    ${d({ size: "copy-medium", tenant: "sn", omitLineHeight: !0 })};
  }

  .sn .step-circle {
    color: var(--maui-color-grey-07);
    margin-right: var(--maui-spacing-3);
    border: 1px solid var(--maui-color-grey-04);

    ${p({
  size: "forms-small",
  tenant: "sn",
  omitLineHeight: !0
})};
  }

  .sn .step-active .step {
    color: var(--maui-color-interaction-interaction);
    font-weight: bold;
  }

  .sn .step-active .step-circle {
    background-color: var(--maui-color-interaction-interaction);
    border: 0;
    color: var(--maui-color-brand-white);
    font-weight: normal;
  }

  .sn .step-done .step-circle {
    background-color: var(--maui-color-interaction-buttonsecondary);
    --maui-icon-color-override: var(--maui-color-brand-white);
    border: 0;
  }

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

  .sn .step-done:hover .step,
  .sn .step-done:hover:focus .step {
    text-decoration-line: underline;
    text-decoration-color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn .step-button:focus {
    border-color: var(--maui-color-grey-08);
  }
`, w2 = s`
  .lx {
    --line-height-circle: 22px;
    --step-button-padding: 6px 8px;
    --step-list-margin: 14px 12px -4px;
    --column-margin: 13px 11px 0px;
    --step-button-box-padding: 0 0 16px 0;
    --expandable-extra-pane-height: 6px;
  }

  .lx .step {
    color: var(--maui-color-disabled-foreground);
  }

  .lx .step {
    align-items: center;
    ${d({ size: "copy-small", tenant: "lx" })};
  }

  .lx .step-label {
    margin-top: 3px;
  }

  .lx .step-circle {
    background-color: var(--maui-color-disabled-foreground);
    margin-right: var(--maui-spacing-base);
    line-height: var(--line-height-circle);
    color: var(--maui-color-brand-white);
  }

  .lx .step-active .step {
    color: var(--maui-color-brand-dark);
  }

  .lx .step-active .step-circle {
    background-color: var(--maui-color-interaction-buttonprimary);
    color: var(--maui-color-brand-white);
  }

  .lx .step-done .step-circle {
    background-color: var(--maui-color-interaction-interaction);
    --maui-icon-color-override: var(--maui-color-brand-white);
  }

  .lx .step-done .step {
    color: var(--maui-color-interaction-interaction);
  }

  .lx .step-progress {
    display: flex;
    align-items: flex-end;
    ${d({ size: "copy-small", tenant: "lx", omitLineHeight: !0 })};
  }

  .lx .step-button:focus {
    border-radius: 2px;
    border-color: var(--maui-color-grey-03);
  }

  .lx .step-done:hover .step,
  .lx .step-done:hover:focus .step {
    color: var(--maui-color-interaction-buttonprimaryhover);
    text-decoration-line: underline;
    text-decoration-color: var(--maui-color-interaction-buttonprimaryhover);
  }

  .lx .step-done:hover .step-circle,
  .lx .step-done:hover:focus .step-circle {
    background-color: var(--maui-color-brand-white);
    border: 1px solid var(--maui-color-interaction-buttonprimaryhover);
    --maui-icon-color-override: var(
      --maui-color-interaction-buttonprimaryhover
    );
  }
`, _2 = s`
  .four_y {
    --step-button-padding: 6px 8px;
    --step-list-margin: 7px 11px 0px;
    --column-margin: 7px 7px 0;
    --step-button-box-padding: 0 0 20px 0;
    --expandable-extra-pane-height: 0px;
  }

  .four_y .step {
    color: var(--maui-color-grey-05);

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

  .four_y .step-circle {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-disabled-foreground);
    margin-right: var(--maui-spacing-2);
    margin-top: 2px;

    ${p({
  size: "forms-small",
  tenant: "four_y",
  omitLineHeight: !0
})};
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y .step-circle span {
    line-height: 0;
  }

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

  .four_y .step-active .step-circle {
    background-color: var(--maui-color-interaction-interaction);
    border: 0;
    color: var(--maui-color-brand-white);
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y .step-done .step-circle {
    background-color: transparent;
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
    border: 1px solid var(--maui-color-interaction-buttonsecondary);
  }

  .four_y .step-done .step {
    color: var(--maui-color-text-copy);
  }

  .four_y .step-done:hover .step-label {
    color: var(--maui-color-text-headline);
  }
  .four_y .step-done:hover .step-circle {
    --maui-icon-color-override: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    border: 1px solid var(--maui-color-interaction-buttonsecondaryhover);
  }

  .four_y button:not(.step-done, [disabled]):hover .step-circle {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .four_y button:not(.step-done, [disabled]):hover .step-label {
    color: var(--maui-color-interaction-interactionhover);
  }

  .four_y .step-active:hover .step,
  .four_y .step-done:hover:focus .step {
    text-decoration: underline;
    text-decoration-color: var(--maui-color-interaction-buttonsecondaryhover);
  }
  .four_y .step-done:hover .step,
  .four_y .step-done:hover:focus .step {
    text-decoration: underline;
    text-decoration-color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y .step-button {
    width: 100%;
    justify-content: flex-start;
    padding: 5px 7px;
  }

  .four_y .step-label {
    display: inline-grid;
  }

  .four_y .step-button:focus {
    border-color: var(--maui-color-interaction-focus);
    border-radius: var(--maui-radii-radius-2);
  }
`, k2 = s`
  .mmg {
    --step-button-padding: 6px 8px;
    --step-list-margin: 4px 12px 0px;
    --column-margin: 8px 8px 0;
    --step-button-box-padding: 0px 0px 20px 0px;
    --expandable-extra-pane-height: 0px;
  }

  .mmg .step {
    color: var(--maui-color-grey-03);

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

  .mmg .step-circle {
    color: var(--maui-color-brand-light);
    background-color: var(--maui-color-disabled-foreground);
    margin-right: var(--maui-spacing-2);
    margin-top: 2px;

    ${p({
  size: "forms-small",
  tenant: "mmg",
  omitLineHeight: !0
})};
    font-weight: var(--maui-font-weight-regular);
  }

  .mmg .step-circle span {
    line-height: 0;
  }

  .mmg .step-active .step {
    color: var(--maui-color-interaction-interactionhover);
    font-weight: bold;
  }

  .mmg .step-active .step-circle {
    background-color: var(--maui-color-interaction-interactionhover);
    border: 0;
    color: var(--maui-color-brand-white);
    font-weight: var(--maui-font-weight-bold);
  }

  .mmg .step-done .step-circle {
    background-color: var(--maui-color-brand-mmg-caption);
    --maui-icon-color-override: var(--maui-color-brand-light);
    border: 1px solid var(--maui-color-brand-mmg-caption);
  }

  .mmg .step-done .step {
    color: var(--maui-color-brand-mmg-caption);
  }

  .mmg .step-done:hover .step-label {
    color: var(--maui-color-interaction-interactionhover);
  }
  .mmg .step-done:hover .step-circle {
    --maui-icon-color-override: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    border: 1px solid var(--maui-color-interaction-buttonsecondaryhover);
  }

  .mmg button:not(.step-done, [disabled]):hover .step-circle {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .mmg button:not(.step-done, [disabled]):hover .step-label {
    color: var(--maui-color-interaction-interactionhover);
  }

  .mmg .step-active:hover .step,
  .mmg .step-done:hover:focus .step {
    text-decoration: none;
  }
  .mmg .step-done:hover .step,
  .mmg .step-done:hover:focus .step {
    text-decoration: none;
  }

  .mmg .step-upcoming .step-circle {
    background-color: var(--maui-color-grey-05);
    --maui-icon-color-override: var(--maui-color-brand-light);
    border: 1px solid var(--maui-color-grey-05);
  }

  .mmg .step-upcoming .step-label {
    color: var(--maui-color-grey-05);
  }

  .mmg .step-button {
    width: 100%;
    justify-content: flex-start;
    padding: 4px 8px;
  }

  .mmg .step-label {
    display: inline-grid;
  }

  .mmg .step-button:focus {
    border-color: var(--maui-color-interaction-focus);
    border-radius: var(--maui-radii-radius-2);
  }
`, S2 = [
  v2,
  f2,
  y2,
  x2,
  $2,
  w2,
  _2,
  k2
];
var O2 = Object.defineProperty, M2 = Object.getOwnPropertyDescriptor, Ar = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? M2(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 && O2(e, t, i), i;
};
class Ii extends k {
  constructor() {
    super(), this.miniTabletUp = new Es(this, "mini-tablet"), this.steps = [], this._currentStep = 0, this.stepProgressRenderCallback = (e, t) => `Step ${e} / ${t}`, this.renderSteps = (e, t) => (
      // ignore unused step variable,
      // @ts-ignore
      e.map((o, i) => {
        const r = t > i, n = t < i;
        return u`
        <div class="step-button-box">
          <button
            class=${y({
          "step-done": r,
          "step-upcoming": n,
          "step-active": !(t !== i),
          "step-button": "step-button"
        })}
            @click="${r ? () => this.jumpBackToStep(i) : null}"
            variant="custom"
            id="step-${i}"
            aria-hidden=${i > 0 && !this.miniTabletUp.matchesQuery}
            ?disabled=${n}
          >
            <div class="step">
              <div class="step-circle">
                ${r ? u`<maui-icon
                      .theme=${this.theme}
                      use="icon-checkmark"
                      size="small"
                    ></maui-icon>` : u`<span>${i + 1}</span>`}
              </div>
              <div class="step-label">${e[i]}</div>
            </div>
          </button>
        </div>
      `;
      })
    ), this.componentName = "progressindicator";
  }
  get currentStep() {
    return this._currentStep;
  }
  set currentStep(e) {
    const t = this._currentStep, o = this.steps.length - 1;
    e > o && o > 0 && (this._currentStep = this.steps.length), e < 0 ? this._currentStep = 0 : this._currentStep = e, this.requestUpdate("currentStep", t);
  }
  connectedCallback() {
    super.connectedCallback();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  nextStep() {
    this.currentStep < this.steps.length - 1 && (this.currentStep += 1, this.emit("maui-change"));
  }
  previousStep() {
    this.currentStep > 0 && (this.currentStep -= 1, this.emit("maui-change"));
  }
  jumpBackToStep(e) {
    e >= 0 && e < this.currentStep && (this.currentStep = e, this.emit("maui-focus"));
  }
  render() {
    return u`
      <div
        class=${y({
      progressindicator: !0,
      [this.theme]: !0
    })}
      >
        <maui-progressbar
          .theme=${this.theme}
          completion="${(this.currentStep + 1) / this.steps.length * 100}"
        ></maui-progressbar>
        ${this.miniTabletUp.matchesQuery ? u`
              <div class="step-list">
                ${this.renderSteps(this.steps, this.currentStep)}
              </div>
            ` : u`
              <maui-progress-collapsible .theme=${this.theme}>
                <maui-progress-collapsible-item
                  currentStep="${this.currentStep}"
                  .theme=${this.theme}
                >
                  <div slot="step-info" class="step-progress">
                    ${this.stepProgressRenderCallback(
      this.currentStep + 1,
      this.steps.length
    )}
                  </div>
                  <div slot="step-list" class="step-list column">
                    ${this.renderSteps(this.steps, this.currentStep)}
                  </div>
                </maui-progress-collapsible-item>
              </maui-progress-collapsible>
            `}
      </div>
    `;
  }
}
Ii.styles = S2;
Ar([
  l({ type: Array })
], Ii.prototype, "steps", 2);
Ar([
  l({ type: Number })
], Ii.prototype, "currentStep", 1);
Ar([
  l({ type: Object, attribute: "step-progress-render-callback" })
], Ii.prototype, "stepProgressRenderCallback", 2);
w("maui-progress-indicator", Ii);
const L2 = s`
  ${A}

  fieldset *:focus-visible {
    outline: none;
  }

  :host {
    display: block;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--maui-font-family-copy);
  }

  .horizontal .input {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    width: 100%;
  }

  .input {
    display: grid;
    gap: calc(var(--maui-spacing-4) + var(--maui-spacing-2));
  }

  .label {
    display: block;
    margin-bottom: var(--maui-spacing-4);
  }

  .info {
    display: block;
    margin-top: var(--maui-spacing-3);
  }
`, B2 = s`
  .os .input {
    gap: var(--maui-spacing-4);
  }
  .os .label .override {
    ${p({ size: "forms-large", tenant: "os" })};
    color: var(--maui-color-grey-08);
  }
`, C2 = s`
  .sn .input {
    gap: var(--maui-spacing-4);
  }
  .sn .label .override {
    ${p({ size: "forms-large", tenant: "sn" })};
  }
`, z2 = s`
  .lh .label .override {
    ${p({ size: "forms-large", tenant: "lh" })};
  }
`, A2 = s`
  .lx .label .override {
    ${p({ size: "forms-large", tenant: "lx" })};
    color: var(--maui-color-grey-08);
  }
`, F2 = s`
  .b2b .label .override {
    ${p({ size: "forms-large", tenant: "b2b" })};
  }
`, N2 = s`
  .four_y .input {
    gap: var(--maui-spacing-4);
  }
  .four_y .label .override {
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y .info {
    margin-top: var(--maui-spacing-2);
  }
`, I2 = s`
  .mmg .input {
    gap: var(--maui-spacing-8);
  }
  .mmg .label .override {
    ${p({ size: "forms-large", tenant: "mmg" })};
  }

  .mmg .info {
    margin-top: var(--maui-spacing-2);
  }
`, U2 = [
  L2,
  B2,
  C2,
  z2,
  A2,
  F2,
  N2,
  I2
], Gs = (a) => {
  const e = h(a);
  return s`
    .${e}.radio {
      --maui-radio-control-width: 24px;
      --maui-radio-control-height: 24px;
      --maui-radio-border: 2px solid var(--maui-color-interaction-interaction);
      --maui-radio-dot-size: 10px;
      --maui-radio-label-color: var(--maui-color-interaction-interaction);
      --maui-radio-checked-control-color: var(--maui-color-text-copy);
      --maui-dot-color: var(--maui-color-interaction-buttonsecondary);
      --maui-radio-checked-label-color: var(--maui-color-text-copy);
      --maui-radio-error-control-color: var(--maui-color-message-error);
      --maui-radio-error-dot-color: var(--maui-color-message-error);
      --maui-radio-error-label-color: var(--maui-color-message-error);
      --maui-radio-hover-control-color: var(
        --maui-color-interaction-interactionhover
      );
      --maui-radio-hover-label-color: var(
        --maui-color-interaction-interactionhover
      );
      --maui-radio-disabled-control-color: var(--maui-color-grey-04);
      --maui-radio-disabled-dot-color: var(--maui-color-grey-04);
      --maui-radio-disabled-label-color: var(--maui-color-grey-04);
    }

    .${e} .label {
      ${p({ size: "forms-large", tenant: a })};
    }
  `;
}, R2 = s`
  ${C}

  ${A}

  :host {
    display: flex;
    position: relative;
  }

  :host(:focus-visible) {
    outline: 0px;
  }

  .radio {
    display: inline-grid;
    grid-template-areas: 'control label';
    column-gap: var(--maui-spacing-3);
    align-items: start;
    position: relative;
    font-family: var(--maui-font-family-copy);

    --maui-focus-radius: var(--maui-radii-pill-radius);
  }
  .content {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
  }
  .compensation {
    opacity: 0;
    display: block;
  }
  .radio:not(.checked) {
    cursor: pointer;
  }

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

  .control {
    position: relative;
    grid-area: control;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--maui-radio-control-width);
    height: var(--maui-radio-control-height);
    border-radius: var(--maui-radii-pill-radius);
    border: var(--maui-radio-border);

    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }

  .dot {
    width: var(--maui-radio-dot-size, 10px);
    height: var(--maui-radio-dot-size, 10px);
    border-radius: var(--maui-radii-pill-radius);
    background-color: var(--maui-dot-color);
    transition: background-color 0.3s ease-in-out;
  }

  .label {
    grid-area: label;
    color: var(--maui-radio-label-color);
    position: relative;
    transition: color 0.3s ease-in-out;

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

  .checked .control {
    border-color: var(--maui-radio-checked-control-color);
  }
  .checked .label {
    color: var(--maui-radio-checked-label-color);
  }

  .has-error .control {
    border-color: var(--maui-radio-error-control-color);
  }
  .has-error .dot {
    background-color: var(--maui-radio-error-dot-color);
  }
  .has-error .label {
    color: var(--maui-radio-error-label-color);
  }

  ${H("radio:not([disabled])", "has-focus", "control")}

  .radio:not([disabled]):not(.checked):not(.has-error):hover .control,
  .radio:not([disabled]):not(.checked):not(.has-error).hover .control,
  .radio:not([disabled]):not(.checked):not(.has-error).has-focus .control {
    border-color: var(--maui-radio-hover-control-color);
  }

  .radio:not([disabled]):not(.checked):not(.has-error):hover .label,
  .radio:not([disabled]):not(.checked):not(.has-error).hover .label,
  .radio:not([disabled]):not(.checked):not(.has-error).has-focus .label {
    color: var(--maui-radio-hover-label-color);
  }

  .radio[disabled] .control {
    border-color: var(--maui-radio-disabled-control-color);
  }
  .radio[disabled] .dot {
    background-color: var(--maui-radio-disabled-dot-color);
  }
  .radio[disabled] .label {
    color: var(--maui-radio-disabled-label-color);
  }
`, D2 = s`
  ${Gs("lh")}
`, E2 = s`
  .os.radio {
    --maui-radio-border: 2px solid var(--maui-color-grey-05);
    --maui-radio-hover-control-color: var(--maui-color-grey-06);
    --maui-radio-label-color: var(--maui-color-text-copy);
    --maui-radio-hover-label-color: var(--maui-color-text-copy);
    --maui-radio-checked-label-color: var(--maui-color-text-copy);
    --maui-radio-checked-control-color: var(--maui-color-grey-06);
    --maui-radio-dot-size: 10px;
    --maui-radio-disabled-label-color: var(--maui-color-grey-04);
    --maui-radio-disabled-control-color: var(--maui-color-grey-04);
    --maui-radio-disabled-dot-color: var(--maui-color-grey-05);
    --maui-dot-color: var(--maui-color-brand-primary);
    --maui-radio-error-control-color: var(--maui-color-message-error);
    --maui-radio-error-dot-color: var(--maui-color-message-error);
    --maui-radio-error-label-color: var(--maui-color-message-error);
    --maui-radio-control-width: 24px;
    --maui-radio-control-height: 24px;
  }

  .os.radio:not([disabled]):not(.checked):hover .control,
  .os.radio:not([disabled]):not(.checked).hover .control {
    background-color: var(--maui-color-grey-02);
    border-color: var(--maui-radio-hover-control-color);
  }

  .os .label {
    padding-top: 2px;

    ${p({ size: "forms-large", tenant: "os" })};
  }
`, P2 = s`
  .lx.radio .content {
    top: 1px;
  }
  .lx.radio {
    --maui-radio-control-width: 24px;
    --maui-radio-control-height: 24px;
    --maui-radio-border: 2px solid var(--maui-color-grey-02);
    --maui-radio-dot-size: 10px;
    --maui-radio-label-color: var(--maui-color-interaction-interaction);

    --maui-radio-checked-control-color: var(--maui-color-grey-02);
    --maui-dot-color: var(--maui-color-brand-lx-red);
    --maui-radio-checked-label-color: var(--maui-color-text-copy);
    --maui-radio-error-control-color: var(--maui-color-message-error);
    --maui-radio-error-dot-color: var(--maui-color-message-error);
    --maui-radio-error-label-color: var(--maui-color-message-error);
    --maui-radio-hover-control-color: var(--maui-color-grey-02);
    --maui-radio-hover-label-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-radio-disabled-control-color: var(--maui-color-grey-02);
    --maui-radio-disabled-dot-color: var(--maui-color-grey-02);
    --maui-radio-disabled-label-color: var(--maui-color-grey-02);
  }

  .lx.radio:not([disabled]):not(.checked):hover .content,
  .lx.radio:not([disabled]):not(.checked).hover .content {
    text-decoration: underline;
  }

  .lx .label {
    padding-top: 2px;

    ${p({ size: "forms-large", tenant: "lx" })};
  }
`, H2 = s`
  .sn.radio {
    --maui-radio-control-width: 20px;
    --maui-radio-control-height: 20px;
    --maui-radio-border: 1px solid var(--maui-color-brand-sn-blue-4);
    --maui-radio-dot-size: 8px;
    --maui-radio-label-color: var(--maui-color-brand-sn-blue-4);
    --maui-radio-checked-control-color: var(--maui-color-brand-sn-blue-4);
    --maui-dot-color: var(--maui-color-brand-white);
    --maui-radio-checked-label-color: var(--maui-color-brand-sn-blue-4);
    --maui-radio-error-control-color: var(--maui-color-message-error);
    --maui-radio-error-dot-color: var(--maui-color-brand-white);
    --maui-radio-error-label-color: var(--maui-color-message-error);
    --maui-radio-hover-control-color: var(--maui-color-brand-sn-blue-4);
    --maui-radio-hover-label-color: var(--maui-color-brand-sn-blue-4);
    --maui-radio-disabled-control-color: var(--maui-color-grey-04);
    --maui-radio-disabled-dot-color: var(--maui-color-brand-white);
    --maui-radio-disabled-label-color: var(--maui-color-grey-04);
  }

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

  .sn.radio.checked .control {
    background-color: var(--maui-color-brand-sn-blue-4);
  }

  .sn.radio.checked .label,
  .sn.radio:not([disabled]):hover .label,
  .sn.radio:not([disabled]).hover .label,
  .sn.radio .compensation {
    font-weight: var(--maui-font-weight-bold);
  }

  .sn.radio.checked.has-error .control {
    background-color: var(--maui-color-message-error);
  }

  .sn.radio.checked[disabled] .control {
    background-color: var(--maui-radio-disabled-control-color);
  }

  .sn.radio:not([disabled]):not(.checked):hover .label .content,
  .sn.radio:not([disabled]):not(.checked).hover .label .content {
    text-decoration: underline;
  }
`, G2 = s`
  ${Gs("b2b")}

  .b2b.radio {
    --maui-dot-color: var(--maui-color-interaction-buttonprimary);
  }
`, Y2 = s`
  .four_y.radio {
    --maui-radio-control-width: 24px;
    --maui-radio-control-height: 24px;
    --maui-radio-border: 2px solid var(--maui-color-interaction-interaction);
    --maui-radio-dot-size: var(--maui-letter-spacing-10) px;
    --maui-radio-label-color: var(--maui-color-interaction-interaction);
    --maui-radio-checked-control-color: var(
      --maui-color-interaction-interaction
    );
    --maui-dot-color: var(--maui-color-brand-white);
    --maui-radio-checked-label-color: var(--maui-color-interaction-interaction);
    --maui-radio-error-control-color: var(--maui-color-message-error);
    --maui-radio-error-dot-color: var(--maui-color-brand-white);
    --maui-radio-error-label-color: var(--maui-color-message-error);
    --maui-radio-hover-control-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-radio-hover-label-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-radio-disabled-control-color: var(--maui-color-disabled-foreground);
    --maui-radio-disabled-dot-color: var(--maui-color-brand-white);
    --maui-radio-disabled-label-color: var(--maui-color-disabled-foreground);
  }

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

  .four_y.radio.checked .control {
    background-color: var(--maui-color-interaction-interaction);
  }

  .four_y.radio.checked .label,
  .four_y.radio .compensation {
    font-weight: var(--maui-font-weight-bold);
  }

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

  .four_y.radio.checked.has-error .control {
    background-color: var(--maui-color-message-error);
  }

  .four_y.radio.checked[disabled] .control {
    background-color: var(--maui-radio-disabled-control-color);
    border-color: transparent;
  }

  .four_y.radio:not([disabled]):not(.checked):hover .label,
  .four_y.radio:not([disabled]):not(.checked).hover .label {
    text-decoration: underline;
  }
`, T2 = s`
  .mmg.radio {
    --maui-radio-control-width: 20px;
    --maui-radio-control-height: 20px;
    --maui-radio-border: 2px solid var(--maui-color-interaction-interaction);
    --maui-radio-dot-size: 10px;
    --maui-radio-label-color: var(--maui-color-interaction-interaction);
    --maui-radio-label-font-size: var(--maui-font-size-3);
    --maui-radio-label-line-height: var(--maui-line-height-4);
    --maui-radio-checked-control-color: var(--maui-color-brand-mmg-interaction);
    --maui-dot-color: var(--maui-color-interaction-buttonprimaryhover);
    --maui-radio-checked-label-color: var(--maui-color-brand-mmg-interaction);
    --maui-radio-error-control-color: var(--maui-color-message-error);
    --maui-radio-error-dot-color: var(--maui-color-message-error);
    --maui-radio-error-label-color: var(--maui-color-message-error);
    --maui-radio-hover-control-color: var(--maui-color-brand-mmg-interaction);
    --maui-radio-hover-label-color: var(--maui-color-brand-mmg-interaction);
    --maui-radio-disabled-control-color: var(--maui-color-brand-mmg-grey2);
    --maui-radio-disabled-dot-color: var(--maui-color-brand-mmg-grey2);
    --maui-radio-disabled-label-color: var(--maui-color-brand-mmg-grey2);
  }

  .mmg.radio {
    align-items: center;
  }

  .mmg.radio:not([disabled]):not([disabled]).has-focus.has-error
    .control::after {
    box-shadow: var(--maui-effect-shadow-focus-offset-x, 0)
      var(--maui-effect-shadow-focus-offset-y, 0)
      var(--maui-effect-shadow-focus-radius, 0)
      var(--maui-effect-shadow-focus-spread, 1px)
      var(--maui-color-brand-mmg-error);
  }

  .mmg.radio:not([disabled]):not([disabled]).has-focus.has-error
    error-highlight {
    background-color: var(--maui-brand-color-light);
    color: green;
  }
`, X2 = [
  R2,
  D2,
  E2,
  P2,
  H2,
  G2,
  Y2,
  T2
];
var V2 = Object.defineProperty, j2 = Object.getOwnPropertyDescriptor, Vt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? j2(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 && V2(e, t, i), i;
};
class mt extends Uo {
  constructor() {
    super({ unCheckableMode: !1 }), this.componentName = "radio", this.mutationObserver = new MutationObserver(
      this.handleSlotTextContentChange.bind(this)
    );
  }
  handleCheckedChange() {
    this.setAttribute("aria-checked", this.checked ? "true" : "false");
  }
  connectedCallback() {
    super.connectedCallback(), this.setInitialAttributes();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.mutationObserver.disconnect();
  }
  setInitialAttributes() {
    this.setAttribute("role", "radio"), this.setAttribute("tabindex", "-1"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  syncCompensationLabel(e) {
    const t = e?.target || this.defaultSlot;
    this.compensationLabel = t.assignedNodes().map((o) => o.cloneNode(!0));
  }
  handleSlotChange(e) {
    this.syncCompensationLabel(e), this.defaultSlot?.assignedNodes()?.forEach((t) => {
      this.mutationObserver.observe(t, {
        childList: !0,
        subtree: !0,
        characterData: !0
      });
    });
  }
  // Triggers actions if text within the slot changes.
  handleSlotTextContentChange(e) {
    for (const t of e)
      (t.type === "characterData" || t.type === "childList") && this.syncCompensationLabel();
  }
  firstUpdated() {
    super.firstUpdated();
  }
  render() {
    return u` <span
      part="base"
      role="radio"
      aria-checked=${this.checked}
      ?disabled=${this.disabled}
      class=${y({
      [this.theme]: !0,
      radio: !0,
      checked: this.checked,
      hover: this.isHovered,
      "has-focus": this.hasFocus,
      "has-error": !!this.hasError
    })}
      @click=${this.handleClick}
    >
      <span class="control">
        ${this.checked ? u`<span class="dot"></span>` : void 0}
      </span>
      <span class="label"
        ><span class="compensation" aria-hidden="true"
          >${this.compensationLabel}</span
        >
        <span class="content"
          ><slot @slotchange=${this.handleSlotChange}></slot
        ></span> </span
    ></span>`;
  }
}
mt.styles = X2;
Vt([
  M(".control")
], mt.prototype, "control", 2);
Vt([
  M("slot")
], mt.prototype, "defaultSlot", 2);
Vt([
  l()
], mt.prototype, "name", 2);
Vt([
  l()
], mt.prototype, "value", 2);
Vt([
  l({ attribute: "has-error", type: Boolean })
], mt.prototype, "hasError", 2);
Vt([
  l({ attribute: "is-hovered", type: Boolean })
], mt.prototype, "isHovered", 2);
Vt([
  F("checked")
], mt.prototype, "handleCheckedChange", 1);
Vt([
  O()
], mt.prototype, "compensationLabel", 2);
w("maui-radio", mt);
var q2 = Object.defineProperty, K2 = Object.getOwnPropertyDescriptor, Vo = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? K2(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 && q2(e, t, i), i;
};
class jt extends Ne {
  constructor() {
    super(...arguments), this.label = "", this.hint = "", this.value = "", this.layout = "vertical", this.formControlController = new tt(this);
  }
  firstUpdated() {
    super.firstUpdated(), this.formControlController.updateValidity();
  }
  getAllRadios() {
    return [...this.querySelectorAll("maui-radio")];
  }
  handleRadioClick(e) {
    const t = e.target, o = this.getAllRadios();
    if (!o.includes(t))
      return;
    const i = this.value;
    t.disabled || (this.value = t.value, o.forEach((r) => {
      r.checked = r === t, r.setAttribute("tabindex", r === t ? "0" : "-1");
    }), this.value !== i && (this.emit("maui-change"), this.emit("maui-input")));
  }
  handleKeyDown(e) {
    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(
      e.key
    ))
      return;
    const t = this.getAllRadios().filter((c) => !c.disabled), o = t.find((c) => c.checked) ?? t[0], i = (
      // eslint-disable-next-line no-nested-ternary
      e.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(e.key) ? -1 : 1
    ), r = this.value;
    let n = t.indexOf(o) + i;
    n < 0 && (n = t.length - 1), n > t.length - 1 && (n = 0), this.getAllRadios().forEach((c) => {
      c.checked = !1, c.setAttribute("tabindex", "-1");
    }), this.value = t[n].value, t[n].checked = !0, t[n].setAttribute("tabindex", "0"), t[n].focus(), this.value !== r && (this.emit("maui-change"), this.emit("maui-input")), e.preventDefault();
  }
  handleLabelClick() {
    const e = this.getAllRadios(), o = e.find((i) => i.checked) || e[0];
    o && o.focus();
  }
  handleSlotChange() {
    const e = this.getAllRadios();
    e.forEach((t) => {
      this.value === "" && t.checked && (this.value = t.value, this.emit("maui-change"), this.emit("maui-input")), t.checked = t.value === this.value, t.checked && t.setAttribute("tabindex", "0");
    }), e.some((t) => t.checked) || e.find((t) => !t.disabled)?.setAttribute("tabindex", "0");
  }
  handleInvalid(e) {
    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
  }
  updateCheckedRadio() {
    this.getAllRadios().forEach((t) => {
      t.checked = t.value === this.value;
    }), this.formControlController.setValidity(this.validity.valid);
  }
  handleValueChange() {
    this.hasUpdated && this.updateCheckedRadio();
  }
  render() {
    const e = this.id ? this.id : "defaultRadioGroupID", t = this.label, o = this.hint, i = u`
      <slot
        @click=${this.handleRadioClick}
        @keydown=${this.handleKeyDown}
        @slotchange=${this.handleSlotChange}
        role="presentation"
      ></slot>
    `;
    return u` <fieldset
      class=${y({
      "radio-group": !0,
      "has-label": t,
      "has-hint": o,
      [this.layout]: !0,
      [this.theme]: !0
    })}
      name=${this.name}
      role="radiogroup"
      aria-invalid=${this.hasError}
      aria-required=${this.required}
      aria-labelledby="${e}-label"
      aria-describedby="${e}-subheadline ${e}-hint ${e}-error"
    >
    <slot name="label" id="${e}-label">
      ${this.label ? u`<maui-headline
              type="h4"
              class="label"
              @click=${this.handleLabelClick}
              .theme=${this.theme}
              weight="light"
            >
              <span class="override">${this.label}</span>
            </maui-headline>` : ""}
      </slot>
      <slot name="subheadline" id="${e}-subheadline">
        ${this.subheadline ? u`<maui-copy margin .theme=${this.theme}>
                ${this.subheadline}
              </maui-copy>` : ""}
      </slot>
      <div class="input">
        <div class="visually-hidden" hidden>
          <label class="validation">
            <input
              type="text"
              class="validation-input"
              ?required=${this.required}
              tabindex="-1"
              hidden
              .value=${this.value}
              @invalid=${this.handleInvalid}
            />
          </label>
        </div>
        ${i}
      </div>
      ${this.errorMessage || this.hint ? u`<div class="info">
              <div
                aria-live="polite"
                aria-relevant="additions"
                aria-atomic="true"
              >
                ${this.errorMessage ? u`<maui-error-highlight
                      .theme=${this.theme}
                      aria-live="assertive"
                      id="${e}-error"
                      >${this.errorMessage}</maui-error-highlight
                    >` : ""}
              </div>
              ${this.hint && !this.errorMessage ? u`<maui-hint
                    id="${e}-hint"
                    .theme=${this.theme}
                    aria-live="assertive"
                    aria-hidden=${o ? "false" : "true"}
                    >${this.hint}</maui-hint
                  >` : ""}
            </div>` : ""}
      </div>
    </fieldset>`;
  }
}
jt.styles = U2;
Vo([
  l()
], jt.prototype, "label", 2);
Vo([
  l()
], jt.prototype, "subheadline", 2);
Vo([
  l({ attribute: "hint" })
], jt.prototype, "hint", 2);
Vo([
  l({ reflect: !0 })
], jt.prototype, "value", 2);
Vo([
  l({ type: String })
], jt.prototype, "layout", 2);
Vo([
  F("value")
], jt.prototype, "handleValueChange", 1);
w("maui-radio-group", jt);
const W2 = s`
  ${A}

  fieldset *:focus-visible {
    outline: none;
  }

  fieldset {
    --maui-segmented-control-outline-width: 2px;
    --maui-segmented-control-item-height: 50px;

    padding: var(--maui-segmented-control-outline-width);
    margin: 0;
    border: 0;
  }

  .input {
    width: 100%;
    position: relative;
  }

  .items {
    display: flex;
    gap: var(--maui-segmented-control-outline-width);
    justify-content: space-between;
    width: 100%;
    min-height: calc(
      var(--maui-segmented-control-item-height) - 2 *
        var(--maui-segmented-control-outline-width)
    );
  }
`, Z2 = s`
  fieldset.sn {
    --maui-segmented-control-outline-width: 1px;
  }
`, Q2 = s`
  fieldset.lx {
    --maui-segmented-control-outline-width: 1px;
  }
`, J2 = s`
  fieldset.os {
    --maui-segmented-control-outline-width: 1px;
    --maui-segmented-control-item-height: 48px;
  }

  .os .items {
    outline: 1px solid var(--maui-color-grey-02);
    gap: 0;
  }
`, ex = s`
  fieldset.four_y {
    --maui-segmented-control-outline-width: 1px;
    --maui-segmented-control-item-height: 52px;
  }

  .four_y .items {
    border-radius: var(--maui-radii-pill-radius);
    outline: 2px solid var(--maui-color-interaction-interaction);
    padding: var(--maui-spacing-2);
    gap: 0;
  }

  .four_y[disabled] .items {
    outline-color: var(--maui-color-disabled-background);
  }
`, tx = s`
  fieldset.mmg {
    --maui-segmented-control-outline-width: 1px;
    --maui-segmented-control-item-height: 52px;
  }

  .mmg .items {
    outline: var(--maui-spacing-0) solid var(--maui-color-grey-04);
    gap: 0;
  }

  .mmg .segmented-control-items:last-child .control {
    border: 0px solid red;
  }

  .mmg[disabled] .items {
    outline-color: var(--maui-color-disabled-background);
  }
`, ox = [W2, Q2, J2, Z2, ex, tx];
var ix = Object.defineProperty, ax = Object.getOwnPropertyDescriptor, qt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? ax(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 && ix(e, t, i), i;
};
class ht extends Ne {
  constructor() {
    super(...arguments), this.formControlController = new tt(this), this.label = "", this.name = "option", this.value = "", this.required = !1, this.disabled = !1;
  }
  /** returns validity state valid (no validation) */
  get validity() {
    return fi;
  }
  connectedCallback() {
    super.connectedCallback();
  }
  getAllSegmentedControls() {
    const e = [
      ...this.querySelectorAll("maui-segmented-control-item")
    ];
    return e.length >= 2 && e.length <= 5 ? e : [];
  }
  handleSegmentedControlClick(e) {
    const t = e.target, o = this.getAllSegmentedControls(), i = this.value;
    t.disabled || (this.value = t.value, o.forEach((r) => {
      r.checked = r === t, r.tabIndex = r === t ? 0 : -1;
    }), this.value !== i && (this.emit("maui-change"), this.emit("maui-input")));
  }
  handleKeyDown(e) {
    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(
      e.key
    ))
      return;
    const t = this.getAllSegmentedControls().filter(
      (c) => !c.disabled
    ), o = t.find((c) => c.checked) ?? t[0], i = (
      // eslint-disable-next-line no-nested-ternary
      e.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(e.key) ? -1 : 1
    ), r = this.value;
    let n = t.indexOf(o) + i;
    n < 0 && (n = t.length - 1), n > t.length - 1 && (n = 0), this.getAllSegmentedControls().forEach((c) => {
      c.checked = !1, c.setAttribute("tabindex", "-1");
    }), this.value = t[n].value, t[n].checked = !0, t[n].setAttribute(
      "tabindex",
      this.disabled ? "-1" : "0"
    ), t[n].focus(), this.value !== r && (this.emit("maui-change"), this.emit("maui-input")), e.preventDefault();
  }
  handleSlotChange() {
    this.updateDisabledState();
    const e = this.getAllSegmentedControls();
    e.forEach((t, o) => {
      t.setAttribute("theme", this.theme), t.checked = t.value === this.value, t.checked || t.setAttribute("tabindex", "-1"), o === 0 && t.setAttribute("first", ""), o === e.length - 1 && t.setAttribute("last", "");
    }), e.some((t) => t.checked) || e[0].setAttribute("tabindex", this.disabled ? "-1" : "0");
  }
  updateCheckedSegmentedControl() {
    this.getAllSegmentedControls().forEach((t) => {
      const o = t.value === this.value;
      t.checked = o, t.setAttribute("tabindex", o ? "0" : "-1");
    });
  }
  updateDisabledState() {
    this.getAllSegmentedControls().forEach((t) => {
      this.disabled ? t.disabled = !0 : t.disabled = !1;
    });
  }
  firstUpdated() {
    super.firstUpdated(), this.updateCheckedSegmentedControl(), this.updateDisabledState();
  }
  handleValueChange() {
    this.hasUpdated && this.updateCheckedSegmentedControl();
  }
  handleDisabledChange() {
    this.hasUpdated && this.updateDisabledState();
  }
  render() {
    const e = u`
      <slot
        @click=${this.handleSegmentedControlClick}
        @keydown=${this.handleKeyDown}
        @slotchange=${this.handleSlotChange}
        role="presentation"
      ></slot>
    `;
    return u`<fieldset
      name=${this.name}
      role="radiogroup"
      aria-label=${this.label}
      ?disabled=${this.disabled}
      class=${y({ [this.theme]: !0 })}
    >
      <div class="input">
        <div class="visually-hidden" hidden>
          <label class="validation">
            <input
              type="text"
              class="validation-input"
              ?required=${this.required}
              tabindex="-1"
              hidden
            />
          </label>
        </div>
        <div class="items">${e}</div>
      </div>
    </fieldset>`;
  }
}
ht.styles = ox;
qt([
  M(".validation-input")
], ht.prototype, "input", 2);
qt([
  l()
], ht.prototype, "label", 2);
qt([
  l()
], ht.prototype, "name", 2);
qt([
  l({ reflect: !0 })
], ht.prototype, "value", 2);
qt([
  l({ type: Boolean, reflect: !0 })
], ht.prototype, "required", 2);
qt([
  l({ type: Boolean, reflect: !0 })
], ht.prototype, "disabled", 2);
qt([
  F("value")
], ht.prototype, "handleValueChange", 1);
qt([
  F("disabled")
], ht.prototype, "handleDisabledChange", 1);
w("maui-segmented-control", ht);
const rx = s`
  ${C}

  ${A}

  :host {
    width: 100%;
    outline-width: 0;
  }

  .segmented-control-item {
    --maui-segmented-control-hover-background: var(
      --maui-color-interaction-interactionhover
    );
    --maui-segmented-control-checked-background: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-segmented-control-outline-width: 2px;
    --maui-segmented-control-outline-color: var(--maui-color-grey-07);
    --maui-segmented-control-border-radius: var(--maui-radii-default-radius);

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--maui-font-family-copy);
    ${p({ size: "forms-large", tenant: "wl" })};
    height: 100%;
    outline: var(--maui-segmented-control-outline-width) solid
      var(--maui-segmented-control-outline-color);
    z-index: 0;
    color: var(--maui-color-text-caption);
  }

  @media screen and (max-width: 768px) {
    .segmented-control-item {
      ${p({ size: "forms-medium", tenant: "wl" })};
    }
  }

  .segmented-control-item:not([disabled]):not(.checked) {
    cursor: pointer;
  }

  .label {
    padding: var(--maui-spacing-3);
  }

  .segmented-control-item[first] {
    border-radius: var(--maui-segmented-control-border-radius) 0 0
      var(--maui-segmented-control-border-radius);
  }

  .segmented-control-item[last] {
    border-radius: 0 var(--maui-segmented-control-border-radius)
      var(--maui-segmented-control-border-radius) 0;
  }

  .segmented-control-item.checked {
    background-color: var(--maui-segmented-control-checked-background);
    outline-color: var(--maui-segmented-control-checked-background);
    color: var(--maui-color-brand-light);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
  }

  .segmented-control-item:not([disabled]):not(.checked):hover {
    background-color: var(--maui-segmented-control-hover-background);
    outline-color: var(--maui-segmented-control-hover-background);
    color: var(--maui-color-brand-light);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
  }

  .segmented-control-item[disabled] {
    cursor: not-allowed;
  }

  .segmented-control-item[disabled]:not(.checked) {
    outline-color: var(--maui-color-disabled-foreground);
    color: var(--maui-color-disabled-foreground);
  }

  .segmented-control-item[disabled].checked {
    outline-color: var(--maui-color-disabled-foreground);
    color: var(--maui-color-disabled-background);
    background-color: var(--maui-color-disabled-foreground);
  }

  .segmented-control-item.has-focus {
    z-index: 2; /* Ensure focus outline is always higher z priority than hover/default outlines */
  }

  .control {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ${H(
  "segmented-control-item:not([disabled])",
  "has-focus",
  "control"
)}
`, nx = s`
  .lh.segmented-control-item {
    ${p({ size: "forms-large", tenant: "lh" })};
  }

  @media screen and (max-width: 768px) {
    .lh.segmented-control-item {
      ${p({ size: "forms-medium", tenant: "lh" })};
    }
  }
`, sx = s`
  .sn.segmented-control-item {
    --maui-segmented-control-hover-background: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-segmented-control-checked-background: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-segmented-control-outline-width: 1px;
    --maui-segmented-control-outline-color: var(--maui-color-brand-dark);
    --maui-segmented-control-border-radius: 0;
    ${p({ size: "forms-large", tenant: "sn" })};
  }

  .sn.segmented-control-item:hover {
    text-decoration: underline;
  }

  @media screen and (max-width: 768px) {
    .sn.segmented-control-item {
      ${p({ size: "forms-small", tenant: "sn" })};
    }
  }

  .sn .control {
    --maui-focus-radius: 0;
  }

  .sn.segmented-control-item:not([disabled]):not(.checked) {
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.segmented-control-item:not([disabled]):not(.checked):hover {
    text-decoration: underline;
    color: var(--maui-color-brand-light);
  }

  .sn.segmented-control-item.checked {
    font-weight: var(--maui-font-weight-bold);
  }

  .sn.segmented-control-item[disabled].checked {
    outline-color: var(--maui-color-disabled-foreground);
    color: var(--maui-color-disabled-foreground);
    background-color: var(--maui-color-disabled-background);
  }
`, lx = s`
  .lx.segmented-control-item {
    --maui-segmented-control-hover-background: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-segmented-control-checked-background: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-segmented-control-outline-width: 1px;
    --maui-segmented-control-outline-color: var(--maui-color-grey-03);
    --maui-segmented-control-border-radius: 0;
    ${p({ size: "forms-large", tenant: "lx" })};
  }

  @media screen and (max-width: 768px) {
    .lx.segmented-control-item {
      ${p({ size: "forms-medium", tenant: "lx" })};
    }
  }

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

  .lx.segmented-control-item:not([disabled]):not(.checked) {
    color: var(--maui-color-interaction-interaction);
  }

  .lx.segmented-control-item:not([disabled]):not(.checked):hover {
    color: var(--maui-color-brand-light);
  }

  .lx.segmented-control-item.checked {
    font-weight: var(--maui-font-weight-bold);
  }
`, cx = s`
  .os.has-focus {
    --maui-focus-outline-offset: 0px;
    --maui-focus-outline-offset-left: 4px;
    --maui-focus-outline-offset-right: 4px;
  }

  .os.has-focus[first] {
    --maui-focus-outline-offset-left: initial;
    --maui-focus-radius: 3px 0 0 3px;
  }

  .os.has-focus[last] {
    --maui-focus-outline-offset-right: initial;
    --maui-focus-radius: 0 3px 3px 0;
  }

  .os.segmented-control-item {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-inline: 0;
    outline: 0;
    --maui-segmented-control-hover-background: var(
      --maui-color-interaction-buttonprimaryhover
    );
    ${p({ size: "forms-large", tenant: "os" })};
  }

  @media screen and (max-width: 768px) {
    .os.segmented-control-item {
      ${p({ size: "forms-small", tenant: "os" })};
    }
  }

  .os.segmented-control-item[first] {
    padding-left: 4px;
  }

  .os.segmented-control-item[last] {
    padding-right: 4px;
  }

  .os.segmented-control-item,
  .os.segmented-control-item.checked,
  .os.segmented-control-item:not([disabled]):not(.checked):hover,
  .os.segmented-control-item[disabled]:not(.checked),
  .os.segmented-control-item[disabled].checked {
    background: transparent;
  }

  .os .control {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .os .label {
    padding: var(--maui-spacing-2) var(--maui-spacing-3);
  }

  .os.segmented-control-item:not([disabled]):not(.checked) {
    color: var(--maui-color-interaction-interaction);
  }

  .os.segmented-control-item:not([disabled]):not(.checked):hover {
    color: var(--maui-color-brand-light);
  }

  .os.segmented-control-item.checked {
    font-weight: var(--maui-font-weight-bold);
  }

  .os.segmented-control-item[first] .control {
    padding-left: var(--maui-spacing-3);
    border-radius: 3px 0 0 3px;
  }

  .os.segmented-control-item[last] .control {
    padding-right: var(--maui-spacing-3);
    border-radius: 0 3px 3px 0;
  }

  .os.segmented-control-item.checked .control {
    background-color: var(--maui-segmented-control-checked-background);
    color: var(--maui-color-brand-light);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
  }

  .os.segmented-control-item:not([disabled]):not(.checked):hover .control {
    background-color: var(--maui-segmented-control-hover-background);
    color: var(--maui-color-brand-light);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
  }

  .os.segmented-control-item[disabled]:not(.checked) .control {
    color: var(--maui-color-disabled-foreground);
  }

  .os.segmented-control-item[disabled].checked .control {
    color: var(--maui-color-disabled-foreground);
    background-color: var(--maui-color-disabled-background);
  }
`, dx = s`
  .b2b {
    --maui-segmented-control-checked-background: var(
      --maui-color-interaction-buttonprimary
    );
  }

  @media screen and (max-width: 768px) {
    .b2b.segmented-control-item {
      ${p({ size: "forms-medium", tenant: "b2b" })};
    }
  }
`, ux = s`
  .four_y.has-focus {
    --maui-focus-outline-offset: var(--maui-spacing-1);
    --maui-focus-radius: var(--maui-radii-pill-radius);
  }

  .four_y.segmented-control-item {
    padding-inline: 0;
    outline: 0;
    --maui-segmented-control-hover-background: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  @media screen and (max-width: 768px) {
    .four_y.segmented-control-item {
      ${p({ size: "forms-medium", tenant: "four_y" })};
    }
  }

  .four_y.segmented-control-item,
  .four_y.segmented-control-item.checked,
  .four_y.segmented-control-item:not([disabled]):not(.checked):hover,
  .four_y.segmented-control-item[disabled]:not(.checked),
  .four_y.segmented-control-item[disabled].checked {
    background: transparent;
  }

  .four_y .control {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--maui-radii-pill-radius);
  }

  .four_y .label {
    padding: var(--maui-spacing-2) var(--maui-spacing-3);
  }

  .four_y.segmented-control-item:not([disabled]):not(.checked) {
    color: var(--maui-color-interaction-interaction);
  }

  .four_y.segmented-control-item:not([disabled]):not(.checked):hover {
    color: var(--maui-color-brand-light);
  }

  .four_y.segmented-control-item.checked {
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y.segmented-control-item.checked .control {
    background-color: var(--maui-segmented-control-checked-background);
    color: var(--maui-color-brand-light);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
    box-shadow: 0 0 0 0 var(--maui-segmented-control-hover-background);
    transition: box-shadow 0.2s ease-in-out;
  }

  .four_y.segmented-control-item:not([disabled]):not(.checked):hover .control {
    background-color: var(--maui-segmented-control-hover-background);
    color: var(--maui-color-brand-light);
    box-shadow: 0 0 0 1px var(--maui-segmented-control-hover-background);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
  }

  .four_y.segmented-control-item[disabled]:not(.checked) .control {
    color: var(--maui-color-disabled-foreground);
  }

  .four_y.segmented-control-item[disabled].checked .control {
    color: var(--maui-color-brand-light);
    background-color: var(--maui-color-disabled-background);
  }
`, mx = s`
  .mmg.has-focus {
    --maui-focus-outline-offset: var(--maui-spacing-1);
  }

  .mmg.segmented-control-item {
    padding-inline: 0;
    outline: 0;
    --maui-segmented-control-hover-background: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    ${p({ size: "forms-large", tenant: "mmg" })};
  }

  .mmg.segmented-control-item,
  .mmg.segmented-control-item[disabled]:not(.checked),
  .mmg.segmented-control-item[disabled]:read-only {
    background-color: var(--maui-color-interaction-interaction);
    background: transparent;
  }

  .mmg .control {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mmg .label {
    padding: var(--maui-spacing-2) var(--maui-spacing-3);
  }

  .mmg.segmented-control-item:not([disabled]):not(.checked),
  .mmg.segmented-control-item[disabled]:not(.checked),
  .mmg.segmented-control-item[disabled]:read-only {
    color: var(--maui-color-interaction-interaction);
    border-right: var(--maui-spacing-0) solid var(--maui-color-brand-mmg-grey4);
  }

  .mmg.segmented-control-item.checked:hover,
  .mmg.segmented-control-item:not([disabled]):not(.checked)[last],
  .mmg.segmented-control-item:not([disabled]):not(.checked):hover,
  .mmg.segmented-control-item[disabled][last]:not(.checked),
  .mmg.segmented-control-item[disabled][last]:read-only {
    border: none;
  }

  .mmg.segmented-control-item.checked,
  .mmg.segmented-control-item:not([disabled]):not(.checked):hover {
    color: var(--maui-color-brand-light);
    background-color: var(--maui-segmented-control-hover-background);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
    outline: var(--maui-spacing-0) solid
      var(--maui-segmented-control-hover-background);
  }

  .mmg.segmented-control-item.checked {
    font-weight: var(--maui-font-weight-bold);
    z-index: 1; /* Ensure oulines are higher z priority than default outlines */
    transition: box-shadow 0.2s ease-in-out;
  }

  .mmg.segmented-control-item[disabled]:not(.checked),
  .mmg.segmented-control-item[disabled]:read-only {
    color: var(--maui-color-disabled-foreground);
    border-color: var(--maui-color-disabled-background);
  }

  .mmg.segmented-control-item[disabled].checked,
  .mmg.segmented-control-item[disabled].checked:read-only {
    background-color: var(--maui-color-disabled-background);
    outline-color: var(--maui-color-disabled-background);
    color: var(--maui-color-disabled-foreground);
  }
  .mmg.segmented-control-item[disabled].checked:read-only {
    color: var(--maui-color-text-caption);
    font-weight: var(--maui-font-weight-bold);
  }
`, hx = [
  rx,
  nx,
  sx,
  lx,
  cx,
  dx,
  ux,
  mx
];
var px = Object.defineProperty, gx = Object.getOwnPropertyDescriptor, pt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? gx(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 && px(e, t, i), i;
};
class De extends wt {
  constructor() {
    super(), this.hasFocus = !1, this.checked = !1, this.first = !1, this.last = !1, this.componentName = "maui-segmented-control-item";
  }
  handleCheckedChange() {
    this.setAttribute("aria-checked", this.checked ? "true" : "false");
  }
  connectedCallback() {
    super.connectedCallback();
  }
  setInitialAttributes() {
    this.setAttribute("role", "radio"), this.setAttribute("tabindex", "-1"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  firstUpdated() {
    super.firstUpdated(), this.setInitialAttributes();
  }
  /**
   * selection functionality that happens on click
   * needs to be registered in the markup to take effect
   */
  handleClick() {
    this.disabled || (this.checked = !0);
  }
  render() {
    return u` <div
      part="base"
      role="radio"
      aria-checked=${this.checked}
      ?disabled=${this.disabled}
      class="segmented-control-item ${y({
      [this.theme]: !0,
      checked: this.checked,
      "has-focus": this.hasFocus
    })}"
      @click=${this.handleClick}
      ?first=${this.first}
      ?last=${this.last}
      aria-label=${this.itemLabel}
    >
      <div class="control">
        <div class="label"><slot></slot></div>
      </div>
    </div>`;
  }
}
De.styles = hx;
pt([
  O()
], De.prototype, "hasFocus", 2);
pt([
  M(".control")
], De.prototype, "control", 2);
pt([
  l()
], De.prototype, "name", 2);
pt([
  l()
], De.prototype, "value", 2);
pt([
  l({ type: Boolean, reflect: !0 })
], De.prototype, "checked", 2);
pt([
  l({ type: Boolean, reflect: !0 })
], De.prototype, "disabled", 2);
pt([
  l({ reflect: !0, type: String })
], De.prototype, "itemLabel", 2);
pt([
  l({ type: Boolean })
], De.prototype, "first", 2);
pt([
  l({ type: Boolean })
], De.prototype, "last", 2);
pt([
  F("checked")
], De.prototype, "handleCheckedChange", 1);
w("maui-segmented-control-item", De);
const bx = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-select-button-color-value: var(
        --maui-color-interaction-buttonsecondary
      );
      --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: 6px 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;
    }
    .${e} .label {
      margin-bottom: 4px;
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.3s ease-in-out;
      position: absolute;
      top: 0px;
    }

    /* Show the label only when supposed to */
    .${e} .label:not(.label-shown) {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      width: 1px;
    }

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

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

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

    .${e}.has-focus {
      --maui-select-button-background: var(--maui-color-brand-light);
    }

    .${e}.select {
      padding-top: 18px; /* label height */
    }

    .${e} .trigger {
      border-bottom: var(--maui-select-button-border-bottom);
    }
    .${e}.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);
    }
    .${e}.has-value:not(.disabled, .has-focus, .has-error) {
      --maui-icon-color-override: var(--maui-select-button-color-value);
    }
    .${e}.has-focus:not(.disabled, .has-error) .trigger {
      --maui-select-button-color: var(--maui-color-interaction-interaction);
      border-bottom-color: var(--maui-color-interaction-interaction);
    }
    .${e}.has-focus:not(.disabled, .has-error) {
      --maui-icon-color-override: var(--maui-color-interaction-interaction);
    }
    .${e}.has-error:not(.disabled) .trigger {
      --maui-select-button-color: var(--maui-color-message-error);
      border-bottom-color: var(--maui-color-message-error);
    }
    .${e}.disabled .trigger {
      border-bottom-color: var(--maui-select-button-border-bottom-disabled);
    }
  `;
}, Ys = s`
  ${C}

  ${A}

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

  .trigger {
    font-family: var(--maui-font-family-copy);
    position: relative;
    cursor: pointer;
    border: var(--maui-select-button-border); /* LX, SN */
    background-color: var(--maui-select-button-background, transparent);
    color: var(--maui-select-button-color, var(--maui-color-grey-07));
    padding: var(--maui-select-button-padding);
    width: 100%;
    height: var(--maui-select-button-height, auto);
    text-align: left;
    display: flex;
    justify-content: space-between;
    transition: 0.15s all ease;
    align-items: center;
  }

  .trigger-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - var(--optional-label-width) - var(--maui-spacing-5));
  }

  .wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  button: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;
  }
  .dropdown-list {
    list-style: none;
    padding: var(--maui-select-dropdown-padding);
    margin: 0;
  }

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

  maui-label {
    display: block;
  }

  maui-error-highlight {
    margin: var(--maui-select-error-box-margin);
  }

  maui-hint {
    margin: var(--maui-select-hint-box-margin);
  }

  maui-error-highlight {
    display: block;
  }

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

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

  .clearable.is-open.has-focus .trigger-label {
    padding: 0 30px 0 10px;
  }

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

  .has-error .trigger {
    border: var(--maui-select-button-border-error);
  }

  .has-error.has-focus .trigger {
    box-shadow: var(--maui-select-button-shadow-error);
  }

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

  .disabled .trigger {
    border: var(--maui-select-button-border-disabled);
    cursor: default;
    --maui-select-button-color: var(--maui-color-disabled-foreground);
  }

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

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

  .is-open .icon-expand {
    transform: rotate(0);
  }

  .overlay {
    position: absolute;
    right: var(--maui-select-clear-icon-right, 34px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--maui-select-optional-color, var(--maui-color-grey-07));
  }

  .optional-label {
    font-family: var(--maui-font-family-copy, sans-serif);
    ${d({ size: "copy-small", tenant: "wl" })};
    pointer-events: none;
  }
  .clear {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
  }
`, Ts = s`
  ${bx("lh")}

  .lh.has-focus .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
`, Xs = 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;
  }

  .os .label {
    pointer-events: none;
    position: absolut