Format(
    t,
    o
  ).formatToParts();
  return {
    format: i.map((r) => {
      switch (r.type) {
        case "month":
          return "MM";
        case "day":
          return "DD";
        case "year":
          return "YYYY";
        default:
          return r.value;
      }
    }).join("").replace(/[\u{0080}-\u{10FFFF}]/gu, ""),
    separators: i.map((r) => r.type === "literal" ? r.value : "").filter((r) => r).map((r) => r.replace(/[\u{0080}-\u{10FFFF}]/gu, ""))
  };
}, eb = (a, e) => {
  const t = e?.locale || navigator.languages[0];
  return new Intl.DateTimeFormat(t, {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  }).format(new Date(a));
}, tb = (a, e) => {
  const { format: t, separators: o } = kr(e), r = a.replace(/[\u{0080}-\u{10FFFF}]/gu, "").split(o[0]), n = t.split(
    o[0].replace(/[\u{0080}-\u{10FFFF}]/gu, "")
  );
  return new Date(
    parseInt(r[n.indexOf("YYYY")], 10),
    parseInt(r[n.indexOf("MM")], 10) - 1,
    parseInt(r[n.indexOf("DD")], 10)
  );
}, an = (a) => {
  const e = new Date(a);
  return [e.getMonth() + 1, e.getDate(), e.getFullYear()];
};
var ob = Object.defineProperty, ib = Object.getOwnPropertyDescriptor, st = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? ib(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 && ob(e, t, i), i;
};
class Ue extends k {
  constructor() {
    super(), this.isHovered = !1, this.inactive = !1, this.assistiveSelectedDate = "Selected date", this.componentName = "calendar-day";
  }
  connectedCallback() {
    super.connectedCallback();
  }
  handleClick(e) {
    this.inactive || (e.stopPropagation(), this.fireSelect());
  }
  handleKeyDown(e) {
    this.inactive || ((e.key === "Enter" || e.key === " ") && this.fireSelect(), this.calendarDay.focus());
  }
  fireSelect() {
    this.emit("maui-day-click", {
      detail: { day: this.date },
      bubbles: !0
    });
  }
  handleFocus() {
    this.inactive || this.emit("maui-day-focus", {
      detail: { day: this.date, bubbles: !0 }
    });
  }
  handleMouseEnter() {
    this.isHovered = !0;
  }
  handleMouseLeave() {
    this.isHovered = !1;
  }
  handleFocusedChange() {
    this.focused && this.calendarDay && !this.inactive && this.calendarDay.focus();
  }
  render() {
    const e = Wa(this.date, le(/* @__PURE__ */ new Date())), t = {
      date: this.date,
      inactive: this.inactive,
      hovered: this.isHovered,
      focused: this.focused,
      selected: this.selected,
      theme: this.theme
    }, o = this.dayRenderCallbacks?.default ? this.dayRenderCallbacks.default(t) : "", i = this.dayRenderCallbacks?.indicator ? u`<div class="indicator-wrapper" slot="indicator">
          ${this.dayRenderCallbacks.indicator(t)}
        </div>` : "", r = this.customLocale || navigator.languages[0];
    return u`<div class="wrapper">
      <button
        class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      inactive: !!this.inactive,
      selected: !!this.selected,
      focused: !!this.focused,
      today: e
    })}
        aria-disabled=${U(this.inactive)}
        aria-label=${`${this.selected ? `${this.assistiveSelectedDate}: ` : ""}${new Date(this.date).toLocaleDateString(r)}`}
        aria-live="polite"
        tabindex=${this.inactive ? "-1" : "0"}
        @click=${this.handleClick}
        @keydown=${this.handleKeyDown}
        @focus=${this.handleFocus}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        ${new Date(this.date).getDate()}
        ${o ? u`<div class="content">${o}</div>` : ""}
        ${i ? u`<div class="indicator">${i}</div>` : ""}
      </button>
    </div>`;
  }
}
Ue.styles = qg;
st([
  M(".calendar-day")
], Ue.prototype, "calendarDay", 2);
st([
  l({ type: Boolean, reflect: !0 })
], Ue.prototype, "isHovered", 2);
st([
  l({ type: String, reflect: !0 })
], Ue.prototype, "date", 2);
st([
  l({ type: Boolean })
], Ue.prototype, "inactive", 2);
st([
  l({ type: Boolean })
], Ue.prototype, "selected", 2);
st([
  l({ type: Boolean, reflect: !0 })
], Ue.prototype, "focused", 2);
st([
  l({ type: Object })
], Ue.prototype, "dayRenderCallbacks", 2);
st([
  l({ type: String, attribute: "custom-locale" })
], Ue.prototype, "customLocale", 2);
st([
  l({ attribute: "assistive-selected-date", type: String })
], Ue.prototype, "assistiveSelectedDate", 2);
st([
  F("focused")
], Ue.prototype, "handleFocusedChange", 1);
w("maui-calendar-day", Ue);
const ab = s`
  ${A}

  .calendar-month {
    position: relative;
    z-index: 0;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: var(--maui-spacing-4);
  }

  .filler {
    background-color: var(--maui-color-brand-light);
  }

  .filler.before {
    box-shadow: -1px -1px 0 1px var(--maui-color-brand-light);
  }

  .filler.after {
    box-shadow: 1px 1px 0 1px var(--maui-color-brand-light);
  }

  .weekdays {
    display: grid;
    width: max-content;
    grid-template-columns: repeat(7, max-content);
    gap: 1px;
    padding: 1px;
    padding-bottom: calc(var(--maui-spacing-2) + var(--maui-spacing-3));
  }

  .weekday {
    font-family: var(--maui-font-family-copy);
    ${d({ size: "copy-small", tenant: "wl" })};
    color: var(--maui-color-text-caption);
    width: 40px;
    height: 24px;
    display: grid;
    place-items: center;
  }

  .dates {
    display: grid;
    width: max-content;
    grid-template-columns: repeat(7, max-content);
    gap: 1px;
    padding: 1px;
    position: relative;
  }

  .dates::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--maui-color-grey-02);
  }

  maui-calendar-day[focused],
  maui-calendar-day[ishovered] {
    z-index: 2;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .weekday {
      width: 50px;
    }
  }
`, rb = s`
  .os .dates::after {
    background-color: var(--maui-color-brand-light);
  }

  .os .weekday {
    color: var(--maui-color-grey-07);
    ${d({ size: "copy-small", tenant: "os" })};
  }
`, nb = s`
  .lx .dates::after {
    background-color: var(--maui-color-brand-light);
  }

  .lx .weekday {
    ${d({ size: "copy-small", tenant: "lx" })};
  }
`, sb = s`
  .sn .dates::after {
    background-color: var(--maui-color-brand-light);
  }

  .sn .weekday {
    ${d({ size: "copy-small", tenant: "sn" })};
  }
`, lb = s`
  .lh .weekday {
    ${d({ size: "copy-small", tenant: "lh" })};
  }
`, cb = s`
  .b2b .weekday {
    ${d({ size: "copy-small", tenant: "b2b" })};
  }
`, db = s`
  .four_y .dates,
  .four_y .weekdays {
    gap: 1;
  }

  .four_y .dates::after {
    display: none;
  }

  .four_y .header .month-id {
    color: var(--maui-color-interaction-interaction);
  }
`, ub = s`
  .mmg .header {
    align-items: flex-start;
    margin-bottom: var(--maui-spacing-3);
  }

  .mmg .header .month-id {
    font-weight: var(--maui-font-weight-bold);
    font-size: var(--maui-font-size-4);
    line-height: var(--maui-line-height-4);
  }

  .mmg .weekday {
    ${d({ size: "copy-small", tenant: "mmg" })};
  }
`, mb = [
  ab,
  rb,
  sb,
  lb,
  nb,
  cb,
  db,
  ub
];
var hb = Object.defineProperty, pb = Object.getOwnPropertyDescriptor, kt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? pb(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 && hb(e, t, i), i;
};
class Xe extends k {
  constructor() {
    super(), this.assistiveSelectedDate = "Selected date", this.componentName = "calendar-month";
  }
  selected(e) {
    const t = new Date(e);
    return this.selectedDate && Wa(
      this.selectedDate,
      le(
        new Date(t.getFullYear(), t.getMonth(), t.getDate())
      )
    );
  }
  focused(e) {
    const t = new Date(e);
    return this.focusedDate && Wa(
      this.focusedDate,
      le(
        new Date(t.getFullYear(), t.getMonth(), t.getDate())
      )
    );
  }
  render() {
    const e = this.customLocale || navigator.languages[0], t = new Date(this.monthDate), o = t.getFullYear(), i = t.getMonth() + 1, r = Jg(o, i), n = Qg(o, i), c = (7 - fs(e) + n) % 7, g = (r + c > 35 ? 42 : 35) - (r + c - 1) - 1;
    return u` <div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <div class="header">
        <maui-headline
          type=${["os", "lx", "sn"].includes(this.theme) ? "h5" : "h4"}
          ?emphasized=${this.theme === "sn"}
          .theme=${this.theme}
          ><span class="month-id"
            >${this.dateID.split("_").join(" ")}</span
          ></maui-headline
        >
      </div>
      <div class="content">
        <div class="weekdays">
          ${Wg({ type: "short", locale: e }).map(
      (f) => u`<div class="weekday">${f}</div>`
    )}
        </div>
        <div class="dates">
          ${c > 0 ? u`<div
                style=${At({
      gridColumnStart: 1,
      gridColumnEnd: c + 1
    })}
                class="date filler before"
              ></div>` : ""}
          ${new Array(r).fill(0).map((f, v) => {
      const x = le(
        new Date(o, i - 1, v + 1)
      ), _ = this.min && aa(x, this.min), $ = this.max && ra(x, this.max), L = () => this.focused(x) ? "3" : _ || $ ? "-1" : "";
      return u`<maui-calendar-day
              .date=${x}
              .theme=${this.theme}
              ?inactive=${!!_ || !!$}
              ?selected=${!!this.selected(x)}
              ?focused=${!!this.focused(x)}
              .customLocale=${this.customLocale}
              .assistiveSelectedDate=${this.assistiveSelectedDate}
              .dayRenderCallbacks=${this.dayRenderCallbacks}
              style=${At({
        position: "relative",
        zIndex: L()
      })}
            ></maui-calendar-day>`;
    })}
          ${g > 0 ? u`<div
                style=${At({
      gridColumnStart: 8 - g,
      gridColumnEnd: 8
    })}
                class="date filler after"
              ></div>` : ""}
        </div>
      </div>
    </div>`;
  }
}
Xe.styles = mb;
kt([
  l({ type: String, reflect: !0 })
], Xe.prototype, "monthDate", 2);
kt([
  l({ type: String })
], Xe.prototype, "min", 2);
kt([
  l({ type: String })
], Xe.prototype, "max", 2);
kt([
  l({ type: String })
], Xe.prototype, "selectedDate", 2);
kt([
  l({ type: String, reflect: !0 })
], Xe.prototype, "focusedDate", 2);
kt([
  l({ type: String })
], Xe.prototype, "dateID", 2);
kt([
  l({ type: Object })
], Xe.prototype, "dayRenderCallbacks", 2);
kt([
  l({ type: String, attribute: "custom-locale" })
], Xe.prototype, "customLocale", 2);
kt([
  l({ attribute: "assistive-selected-date", type: String })
], Xe.prototype, "assistiveSelectedDate", 2);
w("maui-calendar-month", Xe);
const gb = s`
  .calendar {
    --maui-calendar-columns-internal: var(--maui-calendar-columns, 1);
  }

  .grid {
    display: grid;
    place-items: start center;
    grid-template-columns: repeat(var(--maui-calendar-columns-internal), 1fr);
    grid-gap: 0 var(--maui-spacing-7);
  }

  .month {
    padding-top: var(--maui-spacing-7);
  }
`, bb = [gb];
var vb = Object.defineProperty, fb = Object.getOwnPropertyDescriptor, Ve = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? fb(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 && vb(e, t, i), i;
};
class Se extends k {
  constructor() {
    super(), this.assistiveSelectedDate = "Selected date", this.componentName = "calendar";
  }
  updated(e) {
    super.updated(e), !e.has("selectedDate") && this.setRange();
  }
  connectedCallback() {
    super.connectedCallback(), this.startDate && this.setRange(), this.startDate || (this.startDate = le(/* @__PURE__ */ new Date())), this.endDate || (this.endDate = le(/* @__PURE__ */ new Date()));
  }
  handleKeyDown(e) {
    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key) && (e.preventDefault(), !!this.focusedDate))
      switch (e.key) {
        case "ArrowLeft": {
          const t = new Date(this.focusedDate);
          let o = le(
            new Date(t.setDate(t.getDate() - 1))
          );
          const i = this.min || this.startDate;
          aa(o, i) && (o = i), this.focusedDate = o;
          break;
        }
        case "ArrowRight": {
          const t = new Date(this.focusedDate);
          let o = le(
            new Date(t.setDate(t.getDate() + 1))
          );
          const i = this.max || this.endDate;
          ra(o, i) && (o = i), this.focusedDate = o;
          break;
        }
        case "ArrowUp": {
          const t = new Date(this.focusedDate);
          let o = le(
            new Date(t.setDate(t.getDate() - 7))
          );
          const i = this.min || this.startDate;
          aa(o, i) && (o = i), this.focusedDate = o;
          break;
        }
        case "ArrowDown": {
          const t = new Date(this.focusedDate);
          let o = le(
            new Date(t.setDate(t.getDate() + 7))
          );
          const i = this.max || this.endDate;
          ra(o, i) && (o = i), this.focusedDate = o;
          break;
        }
      }
  }
  scrollToID(e, t) {
    setTimeout(() => {
      const o = this.shadowRoot?.querySelector(e);
      o && o.scrollIntoView({ behavior: t ? "smooth" : "auto" });
    }, 0);
  }
  handleDayClick(e) {
    e.stopPropagation();
    const { day: t } = e.detail;
    this.selectedDate = t, this.emit("maui-change", {
      detail: { day: t }
    });
  }
  handleDayFocus(e) {
    e.stopPropagation();
    const { day: t } = e.detail;
    t && (this.focusedDate = t);
  }
  setRange() {
    this.range = qi(this.startDate, this.endDate);
  }
  current(e = !1) {
    let t;
    !this.currentDate && !this.selectedDate ? t = /* @__PURE__ */ new Date() : t = new Date(
      this.selectedDate ? this.selectedDate : this.currentDate
    ), this.scrollToID(
      `#${Ka(
        t,
        this.customLocale || navigator.languages[0]
      )}`,
      e
    );
  }
  clear() {
    this.selectedDate = void 0, this.emit("maui-change", { detail: { day: this.selectedDate } });
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
      aria-label="Calendar"
    >
      <div
        class="wrapper"
        @maui-day-click=${this.handleDayClick}
        @maui-day-focus=${this.handleDayFocus}
        @keydown=${this.handleKeyDown}
      >
        <div class="grid">
          ${new Array(this.range).fill(0).map((e, t) => {
      const o = new Date(this.startDate), i = new Date(o.getFullYear(), t + o.getMonth(), 1), r = Ka(i, this.customLocale);
      return u`<div
              class="month"
              id=${r}
              aria-label=${r.split("_").join(" ")}
            >
              <maui-calendar-month
                .dateID=${r}
                .monthDate=${i.toISOString()}
                .theme=${this.theme}
                .max=${this.max}
                .min=${this.min}
                .selectedDate=${this.selectedDate}
                .focusedDate=${this.focusedDate ? this.focusedDate : ""}
                .dayRenderCallbacks=${this.dayRenderCallbacks}
                .customLocale=${this.customLocale}
                .assistiveSelectedDate=${this.assistiveSelectedDate}
              ></maui-calendar-month>
            </div>`;
    })}
        </div>
      </div>
    </div>`;
  }
}
Se.styles = bb;
Ve([
  O()
], Se.prototype, "range", 2);
Ve([
  O()
], Se.prototype, "focusedDate", 2);
Ve([
  l({ type: String, attribute: "start-date", reflect: !0 })
], Se.prototype, "startDate", 2);
Ve([
  l({ type: String, attribute: "end-date", reflect: !0 })
], Se.prototype, "endDate", 2);
Ve([
  l({ type: String, attribute: "current-date" })
], Se.prototype, "currentDate", 2);
Ve([
  l({ type: String, reflect: !0 })
], Se.prototype, "min", 2);
Ve([
  l({ type: String, reflect: !0 })
], Se.prototype, "max", 2);
Ve([
  l({ type: String, attribute: "selected-date", reflect: !0 })
], Se.prototype, "selectedDate", 2);
Ve([
  l({ type: Object, attribute: "day-render-callbacks" })
], Se.prototype, "dayRenderCallbacks", 2);
Ve([
  l({ type: String, attribute: "custom-locale" })
], Se.prototype, "customLocale", 2);
Ve([
  l({ attribute: "assistive-selected-date", type: String })
], Se.prototype, "assistiveSelectedDate", 2);
w("maui-calendar", Se);
var yb = Object.defineProperty, xb = Object.getOwnPropertyDescriptor, vo = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? xb(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 && yb(e, t, i), i;
};
const $b = (a, e) => {
  const t = [], i = Math.min(Math.ceil(6), a), r = Math.min(12 - i, e);
  for (let n = 0; n < i; n += 1)
    t.push(`${n}`);
  for (let n = 0; n < r; n += 1)
    t.push(`${n}`);
  return t.splice(Math.floor(Math.min(t.length, 12) / 2) - 1, 0, "current"), t.length > 12 && (t.length = 12), t;
};
class St extends Se {
  constructor() {
    super(...arguments), this.open = !1, this.label = "Select a date", this.assistiveClose = "Close", this.assistiveSelectedDate = "Selected date", this.debouncedModalScroll = wr(250, this.modalScroll.bind(this));
  }
  connectedCallback() {
    super.connectedCallback(), this.initDisplayRange();
  }
  firstUpdated() {
    super.firstUpdated(), this.open && this.calendar.current(!1);
  }
  // cropping the visible range to 12 months, if possible centered around the current month
  initDisplayRange() {
    const e = new Date(this.endDate);
    if (qi(
      this.startDate,
      le(new Date(e.setMonth(e.getMonth())))
    ) <= 12) {
      this.displayRange = [this.startDate, this.endDate];
      return;
    }
    const o = this.selectedDate || this.currentDate || le(/* @__PURE__ */ new Date()), i = qi(o, this.startDate) - 1, r = qi(o, this.endDate) - 1, n = $b(i, r), c = () => new Date(o);
    this.displayRange = [
      le(
        new Date(
          c().setMonth(
            c().getMonth() - n.indexOf("current")
          )
        )
      ),
      le(
        new Date(
          c().setMonth(
            c().getMonth() + n.slice(n.indexOf("current")).length - 1
          )
        )
      )
    ];
  }
  async handleLoadMore(e) {
    const t = e === "before", o = new Date(this.displayRange[t ? 0 : 1]), i = le(
      new Date(
        new Date(this.displayRange[t ? 0 : 1]).setMonth(
          new Date(this.displayRange[t ? 0 : 1]).getMonth() + (t ? -12 : 12)
        )
      )
    );
    t ? this.displayRange[0] = aa(i, this.startDate) ? this.startDate : i : this.displayRange[1] = ra(i, this.endDate) ? this.endDate : i, this.requestUpdate("displayRange"), e === "before" && new Date(this.displayRange[0]).getTime() !== new Date(this.startDate).getTime() && this.updateComplete.then(() => {
      setTimeout(() => {
        this.calendar.scrollToID(
          `#${Ka(o, this.customLocale)}`,
          !1
        );
      }, 1);
    });
  }
  /** Shows the modal. */
  async show() {
    this.open = !0;
  }
  /** Hides the modal.  */
  async hide() {
    this.open = !1;
  }
  handleModalShown() {
    this.open = !0, this.calendar.current(), this.calendar.current(!1);
  }
  modalScroll(e) {
    const { scrollHeight: t, clientHeight: o, scrollTop: i } = e.detail, r = i === 0, n = t - o === i;
    r && this.handleLoadMore("before"), n && this.handleLoadMore("after");
  }
  handleChange(e) {
    e.stopPropagation(), this.selectedDate = e.detail.day, this.emit("maui-change", {
      detail: { day: e.detail.day },
      bubbles: !0
    }), this.hide();
  }
  render() {
    let e = new Intl.DisplayNames(
      [this.customLocale || navigator.languages[0]],
      { type: "calendar" }
    ).of("gregory");
    return e = e !== "gregorian" ? e : "gregorian calendar", u`<div>
      <maui-modal
        size="custom"
        variant="focus-view"
        .label=${this.label}
        .assistiveClose=${this.assistiveClose}
        .open=${this.open}
        .theme=${this.theme}
        @maui-after-show=${this.handleModalShown}
        @maui-after-hide=${() => {
      this.open = !1;
    }}
        @maui-scroll=${this.debouncedModalScroll}
      >
        <div class="calendar" aria-label=${e}>
          <maui-calendar
            .theme=${this.theme}
            .assistiveSelectedDate=${this.assistiveSelectedDate}
            .startDate=${this.displayRange[0]}
            .endDate=${this.displayRange[1]}
            .selectedDate=${this.selectedDate || ""}
            .min=${this.min}
            .max=${this.max}
            @maui-change=${this.handleChange}
            .customLocale=${this.customLocale}
          >
          </maui-calendar>
        </div>
      </maui-modal>
    </div>`;
  }
}
St.styles = Eg;
vo([
  O()
], St.prototype, "displayRange", 2);
vo([
  M("maui-calendar")
], St.prototype, "calendar", 2);
vo([
  l({ type: Boolean, reflect: !0 })
], St.prototype, "open", 2);
vo([
  l({ type: String })
], St.prototype, "label", 2);
vo([
  l({ attribute: "assistive-close", type: String })
], St.prototype, "assistiveClose", 2);
vo([
  l({ attribute: "assistive-selected-date", type: String })
], St.prototype, "assistiveSelectedDate", 2);
vo([
  l({ type: String, attribute: "custom-locale" })
], St.prototype, "customLocale", 2);
w("maui-calendar-modal", St);
const wb = s`
  fieldset *:focus-visible {
    outline: none;
  }

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

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

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

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

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

  .info-wrapper {
    display: block;
    margin-top: var(--maui-spacing-3);
  }
`, _b = s`
  .os .label .override {
    ${p({ size: "forms-large", tenant: "os" })};
    color: var(--maui-color-grey-08);
  }
`, kb = s`
  .sn .label .override {
    ${p({ size: "forms-large", tenant: "sn" })};
  }
`, Sb = s`
  .lh .label .override {
    ${p({ size: "forms-large", tenant: "lh" })};
  }
`, Ob = s`
  .lx .label .override {
    ${p({ size: "forms-large", tenant: "lx" })};
    color: var(--maui-color-grey-08);
  }
`, Mb = s`
  .b2b .label .override {
    ${p({ size: "forms-large", tenant: "b2b" })};
  }
`, Lb = s`
  .four_y .label .override {
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y .options {
    gap: calc(var(--maui-spacing-4));
  }
`, Bb = s`
  .mmg .label .override {
    ${p({ size: "forms-large", tenant: "mmg" })};
  }

  .mmg .options {
    gap: calc(var(--maui-spacing-8));
  }
`, Cb = [
  wb,
  _b,
  kb,
  Sb,
  Ob,
  Mb,
  Lb,
  Bb
], $a = () => {
  const a = Date.now().toString(36), e = Math.random().toString(36).substr(2);
  return a + e;
};
var zb = Object.defineProperty, Ab = Object.getOwnPropertyDescriptor, Li = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Ab(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 && zb(e, t, i), i;
};
class fo extends k {
  constructor() {
    super(), this.label = "", this.hint = "", this.hasError = !1, this.errorMessage = "", this.layout = "vertical", this.componentName = "checkbox-group";
  }
  handleSlotChange(e) {
    X(
      e.target,
      ["MAUI-CHECKBOX"],
      void 0,
      !0
    ), e.target.assignedElements().forEach((o) => {
      o.setAttribute("theme", this.theme), o.setAttribute("aria-labelledby", `${this.id}-label`), o.setAttribute(
        "aria-describedby",
        `${this.id}-hint ${this.id}-error`
      );
    });
  }
  connectedCallback() {
    super.connectedCallback(), this.id = this.id || `RadioGroup-${$a()}`;
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.layout]: !0,
      "has-error": this.hasError,
      "has-hint": this.hint
    })}
    >
      ${this.label ? u`<maui-headline
            class="label"
            weight="light"
            .theme=${this.theme}
            id="${this.id}-label"
            type="h4"
            ><span class="override">${this.label}</span></maui-headline
          >` : ""}
      <fieldset
        class="options"
        aria-labelledby="${this.id}-label"
        aria-describedby="${this.id}-hint ${this.id}-error"
      >
        <slot @slotchange=${this.handleSlotChange}></slot>
      </fieldset>
      ${this.hint || this.hasError ? u`<div
            class="info-wrapper"
            aria-live="polite"
            aria-relevant="additions"
            aria-atomic="true"
            id="${this.id}-label"
          >
            ${this.hint && !this.hasError ? u`<maui-hint
                  aria-live="assertive"
                  id="${this.id}-hint"
                  .theme=${this.theme}
                  >${this.hint}</maui-hint
                >` : ""}
            ${this.hasError ? u`<maui-error-highlight
                  aria-live="assertive"
                  id="${this.id}-error"
                  .theme=${this.theme}
                  >${this.errorMessage}</maui-error-highlight
                >` : ""}
          </div>` : ""}
    </div>`;
  }
}
fo.styles = Cb;
Li([
  l()
], fo.prototype, "label", 2);
Li([
  l({ attribute: "hint" })
], fo.prototype, "hint", 2);
Li([
  l({ type: Boolean })
], fo.prototype, "hasError", 2);
Li([
  l({ type: String })
], fo.prototype, "errorMessage", 2);
Li([
  l({ type: String })
], fo.prototype, "layout", 2);
w("maui-checkbox-group", fo);
const ys = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-checkbox-disabled-control-border-color: var(--maui-color-grey-04);
      --maui-checkbox-checked-label-color: var(--maui-color-text-copy);
      --maui-checkbox-control-border: 2px solid var(--maui-color-grey-07);
      --maui-checkbox-label-color: var(--maui-color-grey-07);
      --maui-checkbox-icon-color: var(--maui-color-brand-white);
      --maui-checkbox-checked-control-color: var(--maui-color-brand-primary);
      --maui-checkbox-hover-control-color: var(
        --maui-color-interaction-interactionhover
      );
      --maui-checkbox-hover-label-color: var(
        --maui-color-interaction-interaction
      );
      --maui-checkbox-error-control-color: var(--maui-color-message-error);
      --maui-checkbox-error-label-color: var(--maui-color-message-error);
      --maui-checkbox-disabled-control-color: var(--maui-color-grey-04);
      --maui-checkbox-disabled-label-color: var(--maui-color-grey-04);
      --maui-checkbox-disabled-icon-color: var(--maui-color-brand-white);
    }

    .${e}.is-checked:not(.is-disabled) .control,
    .${e}.is-indeterminate:not(.is-disabled) .control {
      background-color: var(--maui-color-brand-primary);
    }

    .${e}.is-checked:not(.is-disabled):not(.has-error) label:hover .control,
    .${e}.is-indeterminate:not(.is-disabled):not(.has-error)
      label:hover
      .control {
      background-color: var(--maui-color-interaction-interactionhover);
    }

    .${e}.has-error:not(.is-disabled) label .control {
      border-color: var(--maui-checkbox-error-control-color);
    }

    .${e}.is-checked.has-error:not(.is-disabled) label .control,
    .${e}.is-indeterminate.has-error:not(.is-disabled) label .control {
      border-color: var(--maui-checkbox-error-control-color);
      background-color: var(--maui-color-message-error);
    }

    .${e}.has-error:not(.is-disabled) label .label,
    .${e}.is-checked.has-error:not(.is-disabled) label .label,
    .${e}.is-indeterminate.has-error:not(.is-disabled) label .label {
      color: var(--maui-checkbox-error-label-color);
    }

    .${e}.checkbox.is-disabled.is-checked .control,
    .${e}.checkbox.is-disabled.is-indeterminate .control {
      background-color: var(--maui-checkbox-disabled-control-color);
    }

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

  ${A}

  :host {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  .checkbox {
    display: inline-grid;
    gap: var(--maui-spacing-2);
    font-family: var(--maui-font-family-copy);
  }

  .checkbox label {
    display: inline-grid;
    grid-template-areas: 'control label';
    grid-template-columns: max-content auto;
    overflow-wrap: break-word;
    align-items: flex-start;
    vertical-align: middle;
    cursor: pointer;
  }

  .checkbox.has-label label {
    gap: var(--maui-spacing-3);
  }

  .input {
    position: absolute;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }

  .control {
    position: relative;
    grid-area: control;
    width: var(--maui-checkbox-control-width, 24px);
    height: var(--maui-checkbox-control-width, 24px);
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: var(--maui-checkbox-control-border);

    border-radius: var(
      --maui-checkbox-control-border-radius,
      var(--maui-radii-default-radius)
    );

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

  .control maui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .label {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    justify-content: start;
    grid-area: label;
    ${p({ size: "forms-large", tenant: "wl" })};
    font-family: var(--maui-font-family-copy);
    color: var(--maui-checkbox-label-color);
    transition: color 0.3s ease-in-out;
  }

  .has-error:not(.is-disabled) .control {
    border-color: var(--maui-checkbox-error-control-color);
  }
  .has-error:not(.is-disabled) .label {
    color: var(--maui-checkbox-error-label-color);
  }

  .is-checked:not(.is-disabled) .control,
  .is-indeterminate:not(.is-disabled) .control {
    border-color: var(--maui-checkbox-checked-control-color);
  }
  .is-checked:not(.is-disabled) .label,
  .is-indeterminate:not(.is-disabled) .label {
    color: var(--maui-checkbox-checked-label-color);
  }

  .is-checked:not(.is-disabled) .control maui-icon,
  .is-indeterminate:not(.is-disabled) .control maui-icon {
    --maui-icon-color: var(--maui-checkbox-icon-color);
  }

  .checkbox:not(.is-disabled) label:hover .control {
    border-color: var(
      --maui-checkbox-hover-control-border-color,
      var(--maui-color-interaction-interactionhover)
    );
  }
  .checkbox:not(.is-disabled) label:hover .label {
    color: var(--maui-checkbox-hover-label-color);
  }

  .checkbox.is-disabled label:hover {
    cursor: not-allowed;
  }

  .is-checked.is-disabled .control maui-icon,
  .is-indeterminate.is-disabled .control maui-icon {
    --maui-icon-color: var(--maui-checkbox-disabled-icon-color);
  }

  .checkbox.is-disabled .control {
    border-color: var(--maui-checkbox-disabled-control-border-color);
  }
  .checkbox.is-disabled .label {
    color: var(--maui-checkbox-disabled-label-color);
  }

  ${H("checkbox", "has-focus", "control")}
`, Nb = s`
  ${ys("lh")}
`, Ib = s`
  .os {
    --maui-checkbox-control-border: 2px solid var(--maui-color-grey-04);
    --maui-checkbox-checked-control-color: var(--maui-color-grey-05);
    --maui-checkbox-checked-label-color: var(--maui-color-text-copy);
    --maui-checkbox-hover-control-border-color: var(--maui-color-grey-06);

    --maui-checkbox-control-width: 24px;
    --maui-checkbox-label-color: var(--maui-color-text-copy);
    --maui-checkbox-hover-label-color: var(--maui-color-text-copy);

    --maui-checkbox-icon-color: var(--maui-color-interaction-buttonprimary);

    --maui-checkbox-error-label-color: var(--maui-color-message-error);
    --maui-checkbox-error-control-color: var(--maui-color-message-error);

    --maui-focus-radius: 0;

    --maui-checkbox-disabled-control-border-color: var(--maui-color-grey-04);
    --maui-checkbox-disabled-label-color: var(--maui-color-grey-04);
    --maui-checkbox-disabled-icon-color: var(--maui-color-grey-05);
  }

  .os label:hover .control {
    background-color: var(--maui-color-grey-02);
  }

  .os.checkbox.is-checked.has-error:not(.is-disabled)
    label:not(:hover)
    .control,
  .os.checkbox.is-indeterminate.has-error:not(.is-disabled)
    label:not(:hover)
    .control {
    border-color: var(--maui-color-message-error);
  }

  .os.checkbox.is-checked.has-error:not(.is-disabled) .label,
  .os.checkbox.is-indeterminate.has-error:not(.is-disabled) .label {
    color: var(--maui-color-message-error);
  }

  .os.is-checked maui-icon,
  .os.is-indeterminate maui-icon {
    --maui-icon-size-override: 20px;
  }

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

  .os.has-error.is-checked .control maui-icon,
  .os.has-error.is-indeterminate .control maui-icon {
    --maui-icon-color: var(--maui-color-message-error);
  }
`, Ub = s`
  .lx {
    --maui-checkbox-error-control-color: var(--maui-color-message-error);
    --maui-checkbox-control-border: 2px solid var(--maui-color-grey-02);
    --maui-checkbox-checked-control-color: var(--maui-color-grey-02);
    --maui-checkbox-hover-control-color: var(--maui-color-grey-02);
    --maui-checkbox-hover-control-border-color: var(--maui-color-grey-02);
    --maui-checkbox-label-color: var(--maui-color-interaction-interaction);
    --maui-checkbox-hover-label-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-checked-label-color: var(--maui-color-text-copy);
    --maui-checkbox-icon-color: var(--maui-color-interaction-buttonprimary);
    --maui-checkbox-error-label-color: var(--maui-color-message-error);
    --maui-checkbox-disabled-control-border-color: var(--maui-color-grey-02);
    --maui-checkbox-disabled-label-color: var(--maui-color-grey-02);
    --maui-checkbox-disabled-icon-color: var(--maui-color-grey-02);
  }

  .lx:not(.is-disabled) label:hover .label {
    text-decoration: underline;
  }

  .lx.is-checked maui-icon,
  .lx.is-indeterminate maui-icon {
    --maui-icon-size-override: 20px;
  }

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

  .lx.has-error:not(.is-disabled) label .control {
    border-color: var(--maui-checkbox-error-control-color);
  }
  .lx.is-checked.has-error:not(.is-disabled) .control,
  .lx.is-indeterminate.has-error:not(.is-disabled) .control {
    border-color: var(--maui-checkbox-error-control-color);
  }

  .lx.has-error:not(.is-disabled) label .label,
  .lx.is-checked.has-error:not(.is-disabled) .label,
  .lx.is-indeterminate.has-error:not(.is-disabled) .label {
    color: var(--maui-checkbox-error-label-color);
  }

  .lx.has-error.is-checked .control maui-icon,
  .lx.has-error.is-indeterminate .control maui-icon {
    --maui-icon-color: var(--maui-color-message-error);
  }
`, Rb = s`
  .sn {
    --maui-checkbox-disabled-control-border-color: var(--maui-color-grey-04);
    --maui-checkbox-hover-control-border-color: var(
      --maui-color-brand-sn-blue-4
    );
    --maui-checkbox-control-border: 1px solid var(--maui-color-brand-sn-blue-4);
    --maui-checkbox-control-width: 20px;
    --maui-checkbox-control-border-radius: 2px;
    --maui-checkbox-label-color: var(--maui-color-brand-sn-blue-4);
    --maui-checkbox-icon-color: var(--maui-color-brand-white);
    --maui-checkbox-checked-control-color: var(--maui-color-brand-sn-blue-4);
    --maui-checkbox-checked-label-color: var(--maui-color-brand-sn-blue-4);
    --maui-checkbox-hover-control-color: var(--maui-color-brand-sn-blue-4);
    --maui-checkbox-hover-label-color: var(--maui-color-brand-sn-blue-4);
    --maui-checkbox-error-control-color: var(--maui-color-message-error);
    --maui-checkbox-error-label-color: var(--maui-color-message-error);
    --maui-checkbox-disabled-control-color: var(
      --maui-color-disabled-foreground
    );
    --maui-checkbox-disabled-label-color: var(--maui-color-disabled-foreground);
    --maui-checkbox-disabled-icon-color: var(--maui-color-brand-white);

    --maui-focus-outline-offset: 4px;
    --maui-focus-radius: 4px;
  }

  .sn.is-checked:not(.is-disabled) .control,
  .sn.is-indeterminate:not(.is-disabled) .control {
    background-color: var(--maui-color-brand-sn-blue-4);
  }

  .sn:not(.is-disabled) label:hover .label {
    text-decoration: underline;
  }

  .sn.is-checked,
  .sn.is-indeterminate {
    font-weight: var(--maui-font-weight-bold);
  }

  .sn.has-error:not(.is-disabled) label .control {
    border-color: var(--maui-checkbox-error-control-color);
  }
  .sn.is-checked.has-error:not(.is-disabled) .control,
  .sn.is-indeterminate.has-error:not(.is-disabled) .control {
    border-color: var(--maui-checkbox-error-control-color);
    background-color: var(--maui-color-message-error);
  }

  .sn.has-error:not(.is-disabled) label .label,
  .sn.is-checked.has-error:not(.is-disabled) .label,
  .sn.is-indeterminate.has-error:not(.is-disabled) .label {
    color: var(--maui-checkbox-error-label-color);
  }

  .sn.is-checked maui-icon,
  .sn.is-indeterminate maui-icon {
    --maui-icon-size-override: 16px;
  }

  .sn.checkbox.is-disabled.is-checked .control,
  .sn.checkbox.is-disabled.is-indeterminate .control {
    background-color: var(--maui-checkbox-disabled-control-color);
  }

  .sn .label {
    ${p({ size: "forms-large", tenant: "sn" })};
  }
`, Db = s`
  ${ys("b2b")}
`, Eb = s`
  .four_y {
    --maui-checkbox-disabled-control-border-color: var(--maui-color-grey-04);
    --maui-checkbox-hover-control-border-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-control-border: 2px solid
      var(--maui-color-interaction-interaction);
    --maui-checkbox-control-width: 24px;
    --maui-checkbox-control-border-radius: 4px;
    --maui-checkbox-label-color: var(--maui-color-interaction-interaction);
    --maui-checkbox-icon-color: var(--maui-color-brand-white);
    --maui-checkbox-checked-control-color: var(
      --maui-color-interaction-interaction
    );
    --maui-checkbox-checked-label-color: var(
      --maui-color-interaction-interaction
    );
    --maui-checkbox-hover-control-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-hover-label-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-error-control-color: var(--maui-color-message-error);
    --maui-checkbox-error-label-color: var(--maui-color-message-error);
    --maui-checkbox-disabled-control-color: var(
      --maui-color-disabled-foreground
    );
    --maui-checkbox-disabled-label-color: var(--maui-color-disabled-foreground);
    --maui-checkbox-disabled-icon-color: var(--maui-color-brand-white);

    --maui-focus-outline-offset: 5px;
    --maui-focus-radius: calc(
      var(--maui-radii-default-radius) + var(--maui-radii-focus-offset)
    );
  }

  .four_y.is-checked:not(.is-disabled) .control,
  .four_y.is-indeterminate:not(.is-disabled) .control {
    background-color: var(--maui-color-interaction-interaction);
  }

  .four_y.is-checked:not(.is-disabled):hover .control,
  .four_y.is-indeterminate:not(.is-disabled):hover .control {
    border-color: var(--maui-color-interaction-interactionhover);
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .four_y.is-checked,
  .four_y.is-indeterminate {
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y.checkbox:not([disabled]).has-focus.has-error .control::after {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x)
      var(--maui-effect-shadow-focus-offset-y)
      var(--maui-effect-shadow-focus-radius)
      var(--maui-effect-shadow-focus-spread) var(--maui-color-message-error);
  }

  .four_y.has-error:not(.is-disabled) label .control {
    border-color: var(--maui-checkbox-error-control-color);
  }
  .four_y.is-checked.has-error:not(.is-disabled) .control,
  .four_y.is-indeterminate.has-error:not(.is-disabled) .control {
    border-color: var(--maui-checkbox-error-control-color);
    background-color: var(--maui-color-message-error);
  }

  .four_y.has-error:not(.is-disabled) label .label,
  .four_y.is-checked.has-error:not(.is-disabled) .label,
  .four_y.is-indeterminate.has-error:not(.is-disabled) .label {
    color: var(--maui-checkbox-error-label-color);
  }

  .four_y.checkbox.is-disabled.is-checked .control,
  .four_y.checkbox.is-disabled.is-indeterminate .control {
    background-color: var(--maui-checkbox-disabled-control-color);
    border-color: transparent;
  }

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

  .four_y:not(.is-disabled) label:hover .label {
    text-decoration: underline;
  }
`, Pb = s`
  .mmg {
    --maui-checkbox-disabled-control-border-color: var(
      --maui-color-brand-mmg-grey3-transparent
    );
    --maui-checkbox-control-border: 2px solid var(--maui-color-brand-primary);
    --maui-checkbox-label-color: var(--maui-color-brand-brand-primary);
    --maui-checkbox-label-font-size: var(--maui-font-size-3);
    --maui-checkbox-label-line-height: var(--maui-line-height-4);
    --maui-checkbox-icon-color: var(--maui-color-brand-white);
    --maui-checkbox-checked-control-color: var(
      --maui-color-brand-mmg-interaction
    );
    --maui-checkbox-hover-control-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-checked-label-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-checked-border: 2px solid
      var(--maui-color-brand-mmg-interaction);
    --maui-checkbox-hover-label-color: var(
      --maui-color-interaction-interactionhover
    );
    --maui-checkbox-error-control-color: var(--maui-color-brand-mmg-error);
    --maui-checkbox-error-label-color: var(--maui-color-brand-mmg-error);
    --maui-checkbox-disabled-control-color: var(--maui-color-brand-mmg-grey3);
    --maui-checkbox-disabled-label-color: var(
      --maui-color-brand-mmg-grey3-transparent
    );
    --maui-checkbox-disabled-icon-color: var(--maui-color-brand-white);
  }

  .mmg.is-checked:not(.is-disabled) .control,
  .mmg.is-indeterminate:not(.is-disabled) .control {
    background-color: var(--maui-color-brand-mmg-interaction);
  }

  .mmg.is-checked:not(.is-disabled) label:hover .control,
  .mmg.is-indeterminate:not(.is-disabled) label:hover .control {
    background-color: var(--maui-color-brand-mmg-interaction);
  }

  .mmg.is-checked.has-error:not(.is-disabled) label:not(:hover) .control,
  .mmg.is-indeterminate.has-error:not(.is-disabled) label:not(:hover) .control {
    border-color: var(--maui-checkbox-error-control-color);
    background-color: var(--maui-color-message-error);
  }
  .mmg.has-error.has-focus:not(.is-disabled) label .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.is-checked.has-error:not(.is-disabled) label:not(:hover) .label,
  .mmg.is-indeterminate.has-error:not(.is-disabled) label:not(:hover) .label {
    color: var(--maui-color-brand-mmg-error);
  }

  .mmg.checkbox.is-disabled.is-checked .control,
  .mmg.checkbox.is-disabled.is-indeterminate .control {
    background-color: var(--maui-checkbox-disabled-control-color);
  }
`, Hb = [
  Fb,
  Nb,
  Ib,
  Ub,
  Rb,
  Db,
  Eb,
  Pb
];
var Gb = Object.defineProperty, Yb = Object.getOwnPropertyDescriptor, lt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Yb(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 && Gb(e, t, i), i;
};
class Re extends Ro {
  constructor() {
    super({ unCheckableMode: !0 }), this.formControlController = new tt(this, {
      value: (e) => e.checked ? e.value || "on" : void 0,
      defaultValue: (e) => e.defaultChecked,
      setValue: (e, t) => {
        e.checked = t;
      }
    }), this.hint = "", this.label = "", this.checked = !1, this.defaultChecked = !1, this.disabled = !1, this.indeterminate = !1, this.hasSlottedLabel = !1;
  }
  firstUpdated() {
    super.firstUpdated(), this.checked = this.checked || this.defaultChecked, this.formControlController.updateValidity();
  }
  handleClick() {
    super.handleClick(), this.indeterminate = !1, this.emit("maui-change");
  }
  handleInput() {
    this.emit("maui-input");
  }
  handleDisabledChange() {
    this.formControlController.setValidity(this.disabled);
  }
  handleStateChange() {
    this.input.checked = this.checked, this.input.indeterminate = this.indeterminate, this.formControlController.updateValidity();
  }
  /** Simulates a click on the checkbox. */
  click() {
    this.input.click();
  }
  /** Sets focus on the checkbox. */
  focus(e) {
    this.input.focus(e);
  }
  /** Removes focus from the checkbox. */
  blur() {
    this.input.blur();
  }
  handleSlotChange(e) {
    const o = e.target.assignedElements({ flatten: !0 });
    this.hasSlottedLabel = !!o.length;
  }
  render() {
    const e = this.id ? this.id : "defaultCheckboxID";
    return u`<div
      class=${y({
      checkbox: !0,
      [this.theme]: !0,
      "is-checked": this.checked,
      "is-disabled": this.disabled,
      "has-focus": this.hasFocus,
      "has-error": this.hasError,
      "has-label": this.label || this.hasSlottedLabel,
      "is-indeterminate": this.indeterminate
    })}
    >
      <label for=${this.name}
        ><input
          class="input"
          type="checkbox"
          title=${this.title}
          .value=${this.value}
          .indeterminate=${Ji(this.indeterminate)}
          .checked=${Ji(this.checked)}
          .disabled=${this.disabled}
          .required=${this.required}
          .id=${this.name}
          .name=${this.name}
          aria-labelledby="${e}-label"
          aria-checked=${this.checked ? "true" : "false"}
          @input=${this.handleInput}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
          @click=${this.handleClick}
          aria-describedby="${e}-hint ${e}-error"
        />
        <div class="control">
          ${this.checked ? u`<maui-icon
                .theme=${this.theme}
                .size=${["four_y"].includes(this.theme) ? "medium" : "small"}
                use="icon-checkmark"
              ></maui-icon>` : ""}${!this.checked && this.indeterminate ? u`<maui-icon
                .theme=${this.theme}
                .size=${["four_y"].includes(this.theme) ? "medium" : "small"}
                use="icon-minus"
              ></maui-icon>` : ""}
        </div>
        <div
          id="${e}-label"
          class="label"
          role="checkbox"
          aria-checked=${this.checked}
          aria-hidden="true"
        >
          ${this.label && this.label.trim() ? this.label : u`<slot @slotchange=${this.handleSlotChange}></slot>`}
        </div>
      </label>
      ${this.errorMessage || this.hint ? u`<div class="info">
            <div
              aria-live="polite"
              aria-relevant="additions"
              aria-atomic="true"
            >
              ${this.errorMessage ? u`<maui-error-highlight
                    id="${e}-error"
                    .theme=${this.theme}
                    >${this.errorMessage}</maui-error-highlight
                  >` : ""}
            </div>
            ${this.hint && !this.errorMessage ? u`<maui-hint
                  id="${e}-hint"
                  .theme=${this.theme}
                  class="hint-text"
                  >${this.hint}</maui-hint
                >` : ""}
          </div>` : ""}
    </div>`;
  }
}
Re.styles = Hb;
lt([
  M('input[type="checkbox"]')
], Re.prototype, "input", 2);
lt([
  l({ type: String })
], Re.prototype, "hint", 2);
lt([
  l({ type: String })
], Re.prototype, "label", 2);
lt([
  l({ type: Boolean, reflect: !0 })
], Re.prototype, "checked", 2);
lt([
  Jn("checked")
], Re.prototype, "defaultChecked", 2);
lt([
  l({ type: Boolean, reflect: !0 })
], Re.prototype, "disabled", 2);
lt([
  l({ type: Boolean, reflect: !0 })
], Re.prototype, "indeterminate", 2);
lt([
  O()
], Re.prototype, "hasSlottedLabel", 2);
lt([
  F("disabled", { waitUntilFirstUpdate: !0 })
], Re.prototype, "handleDisabledChange", 1);
lt([
  F(["checked", "indeterminate"], { waitUntilFirstUpdate: !0 })
], Re.prototype, "handleStateChange", 1);
w("maui-checkbox", Re);
const Tb = s`
  .chip-list {
    --maui-chip-list-gap: var(--maui-spacing-3);

    gap: var(--maui-chip-list-gap);
    display: grid;
    grid-template-columns: calc(50% - calc(var(--maui-chip-list-gap) / 2)) calc(
        50% - calc(var(--maui-chip-list-gap) / 2)
      );
    max-width: 100%;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .chip-list {
      display: flex;
      flex-wrap: wrap;
    }
  }
`, Xb = [Tb];
var Vb = Object.defineProperty, jb = Object.getOwnPropertyDescriptor, wa = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? jb(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 && Vb(e, t, i), i;
};
class To extends k {
  constructor() {
    super(), this.illegalAssignment = !1, this.previouslySelected = null, this.multiple = !1, this.inverted = !1, this.componentName = "chip-list";
  }
  /** Test slotted elements to be only one maui-chip and nothing else. If anything else is present, don't show children altogether. */
  testAllowedAssignments(e) {
    const t = e.target.assignedElements();
    if (t.length > 0 && t.some(({ nodeName: o }) => o !== "MAUI-CHIP")) {
      this.illegalAssignment = !0, console.error(
        "<maui-chip-list> Only <maui-chip> is accepted as a child component"
      );
      return;
    }
    t.forEach((o) => {
      if (o.nodeName === "MAUI-CHIP") {
        const i = o;
        this.multiple || (this.previouslySelected === null && i.checked ? this.previouslySelected = i : i !== this.previouslySelected && (i.checked = !1, console.warn(
          `Only one active chip allowed in non-multiple chip lists. Removed selected attribute from ${o.nodeName} at ${this.nodeName}`
        ))), this.inverted ? i.setAttribute("inverted", "") : i.removeAttribute("inverted");
      }
    }), this.signalCheckedChips(), this.illegalAssignment = !1;
  }
  handleSlotChange(e) {
    this.testAllowedAssignments(e);
  }
  /** Function to gather and signal checked chips. This will fire a `maui-change` event containing said chips */
  signalCheckedChips() {
    const e = [];
    Array.from(this.children).forEach((t) => {
      const o = t;
      return o.setAttribute("theme", this.theme), (o.checked || o.dismissable) && e.push(o), null;
    }), this.emit("maui-change", {
      detail: {
        selectedChips: e
      }
    });
  }
  handleChipSelection(e) {
    e.stopPropagation();
    const t = e.target;
    t.disabled || this.multiple || !t.checked || (this.previouslySelected !== null && (this.previouslySelected.checked = !1), this.previouslySelected = t, this.signalCheckedChips());
  }
  render() {
    return u`<div class="${this.componentName}">
      <slot
        @slotchange=${this.handleSlotChange}
        ?hidden=${this.illegalAssignment}
        @maui-chip-toggle=${this.handleChipSelection}
      ></slot>
    </div>`;
  }
}
To.styles = Xb;
wa([
  O()
], To.prototype, "illegalAssignment", 2);
wa([
  O()
], To.prototype, "previouslySelected", 2);
wa([
  l({ reflect: !0, type: Boolean })
], To.prototype, "multiple", 2);
wa([
  l({ type: Boolean })
], To.prototype, "inverted", 2);
w("maui-chip-list", To);
const qb = s`
  .collapsible {
    border-bottom: 1px solid
      var(--maui-collapsible-border-color, var(--maui-color-grey-04));
  }

  .collapsible.nested {
    border-bottom: none;
  }
`, Kb = s`
  .lx {
    /* --maui-collapsible-nested-margin: 10px 0 0 18px; */
    --maui-collapsible-border-color: var(--maui-color-grey-02);
  }
`, Wb = s``, Zb = s``, Qb = [qb, Kb, Wb, Zb];
var Jb = Object.defineProperty, ev = Object.getOwnPropertyDescriptor, Sr = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? ev(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 && Jb(e, t, i), i;
};
class Bi extends k {
  constructor() {
    super(), this.scrolling = !1, this.componentName = "collapsible";
  }
  connectedCallback() {
    super.connectedCallback(), this.handleScrollChange();
  }
  updated(e) {
    super.updated(e), e.has("scrolling") && this.handleScrollChange();
  }
  /** Adds or removes the `scrolling` attribute on the children based on the `scrolling` attribute being present on the collapsible. */
  handleScrollChange() {
    this.defaultSlot && this.defaultSlot.assignedElements({ flatten: !0 }).forEach((e) => {
      this.scrolling ? e.setAttribute("scrolling", "") : e.removeAttribute("scrolling");
    });
  }
  handleSlotChange() {
    [
      ...this.defaultSlot.assignedElements({ flatten: !0 })
    ].filter((t) => t.tagName.toLowerCase() === "maui-collapsible-item").forEach((t) => {
      t.setAttribute("theme", this.theme);
    });
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.type]: !!this.type,
      [this.theme]: !0
    })}
    >
      <slot @slotchange=${this.handleSlotChange}></slot>
    </div>`;
  }
}
Bi.styles = Qb;
Sr([
  M("slot")
], Bi.prototype, "defaultSlot", 2);
Sr([
  l({ type: String })
], Bi.prototype, "type", 2);
Sr([
  l({ type: Boolean })
], Bi.prototype, "scrolling", 2);
w("maui-collapsible", Bi);
const xs = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-collapsible-color-header: var(--maui-color-text-copy);
      --maui-collapsible-hover-color-header: var(
        --maui-color-interaction-interactionhover
      );
      --maui-collapsible-font-family-header: var(--maui-font-family-headline);
      --maui-collapsible-padding-header: 13px var(--maui-spacing-4);
      --maui-collapsible-text-decoration-hover: none;
      --maui-collapsible-section-padding: var(--maui-spacing-3)
        var(--maui-spacing-4) var(--maui-spacing-4);
      --maui-collapsible-focus-outline-offset-y: 0px; /* can be inlined after alignment - all 0 */
      --maui-collapsible-focus-radius: 6px;
    }

    .${e} .header {
      ${p({ size: "collapsible", tenant: a })};
    }

    .${e}.nested {
      --maui-collapsible-padding-header: 13px var(--maui-spacing-3);
      --maui-collapsible-section-padding: var(--maui-spacing-3)
        var(--maui-spacing-3) var(--maui-spacing-5);
    }

    @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
      .${e}, .${e}.nested {
        --maui-collapsible-section-padding: var(--maui-spacing-3)
          var(--maui-spacing-4) var(--maui-spacing-4) 0;
        --maui-collapsible-padding-header: 13px 0;
      }

      .${e}.nested {
        margin-left: var(--maui-spacing-4);
      }
    }
  `;
}, tv = s`
  ${C}

  ${A}

  .collapsibleitem {
    border-top: 1px solid
      var(--maui-collapsible-border-color, var(--maui-color-grey-04));
  }

  .header {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: start;
    justify-content: space-between;
    text-align: left;
    position: relative;
    padding: var(--maui-collapsible-padding-header);
    font-family: var(--maui-collapsible-font-family-header);
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-collapsible-color-header);
    --maui-icon-color-override: var(--maui-collapsible-color-header);
    --maui-icon-size-override: var(--maui-collapsible-icon-size-override);
  }
  .header:not([disabled]):focus::after {
    --maui-focus-radius: var(--maui-collapsible-focus-radius);
    --maui-focus-outline-offset-y: var(
      --maui-collapsible-focus-outline-offset-y
    );
  }
  .header:hover {
    color: var(
      --maui-collapsible-hover-color-header,
      var(--maui-collapsible-color-header)
    );
    --maui-icon-color-override: var(
      --maui-collapsible-hover-color-header,
      var(--maui-collapsible-color-header)
    );
  }
  .header:hover .header-text {
    text-decoration: var(--maui-collapsible-text-decoration-hover, underline);
  }
  .collapsed .header {
    color: var(
      --maui-collapsible-color-header-collapsed,
      var(--maui-collapsible-color-header)
    );
    --maui-icon-color-override: var(
      --maui-collapsible-color-header-collapsed,
      var(--maui-collapsible-color-header)
    );
  }
  .collapsed .header:hover {
    color: var(
      --maui-collapsible-hover-color-header-collapsed,
      var(--maui-collapsible-hover-color-header)
    );
    --maui-icon-color-override: var(
      --maui-collapsible-hover-color-header-collapsed,
      var(--maui-collapsible-hover-color-header)
    );
  }
  .collapsed .icon-expand {
    transform: rotate(-180deg);
  }
  .icon-expand {
    margin-top: calc(
      (var(--maui-line-height-3) - var(--maui-collapsible-icon-size-override)) /
        2
    );
    /* LH: (lineheight 24 - iconheight 17) / 2 - due to multi-line */
    margin-left: var(--maui-spacing-3);
    transition: transform 0.25s linear;
  }

  ${H("header")}

  .section {
    padding: var(--maui-collapsible-section-padding);
  }
  .expandable-pane {
    overflow-y: hidden;
    height: auto;
    transition: height 0.5s ease;
  }
  .expandable-pane.collapsed {
    height: 0;
  }
  .expandable-pane.hidden {
    height: 0;
    display: none;
  }

  .nested .header {
    font-weight: var(
      --maui-collapsible-font-weight-nested,
      var(--maui-font-weight-regular)
    );
  }
`, ov = s`
  ${xs("lh")}
`, iv = s`
  @keyframes hover {
    0% {
      background-image: linear-gradient(transparent, transparent);
      background-position: 100% 80%;
    }
    100% {
      background-image: linear-gradient(
        var(--maui-color-interaction-buttonprimaryhover),
        var(--maui-color-interaction-buttonprimaryhover)
      );
      background-position: 100% 100%;
    }
  }

  .os {
    --maui-collapsible-color-header: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-collapsible-hover-color-header: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-collapsible-color-header-collapsed: var(--maui-color-text-copy);
    --maui-collapsible-hover-color-header-collapsed: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-collapsible-font-family-header: var(--maui-font-family-copy);
    --maui-collapsible-padding-header: var(--maui-spacing-3);

    --maui-collapsible-section-padding: var(--maui-spacing-2)
      var(--maui-spacing-3) var(--maui-spacing-5);

    --maui-collapsible-focus-outline-offset-y: 0px; /* top-o 1 bottom-o -1 ?? */
    --maui-collapsible-focus-radius: 0;
  }

  .os .header {
    ${p({ size: "collapsible", tenant: "os" })};
  }

  .os .header .header-text {
    display: block;
  }

  .os .header:hover .header-text {
    text-decoration: none;
    animation-duration: 0.3s;
    animation-name: hover;
    background-image: linear-gradient(
      var(--maui-color-interaction-buttonprimaryhover),
      var(--maui-color-interaction-buttonprimaryhover)
    );
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .os.nested .header {
    ${p({ size: "collapsible-nested", tenant: "os" })};
  }

  .os.nested .header .header-text {
    font-weight: var(--maui-font-weight-regular);
  }

  .os.nested:not(.collapsed) {
    transition: background-color ease-in-out 0.3s;
    background-color: var(--maui-color-grey-01);
  }
`, av = s`
  .lx {
    --maui-collapsible-color-header: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-collapsible-hover-color-header: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-collapsible-color-header-collapsed: var(
      --maui-color-interaction-interaction
    );
    --maui-collapsible-hover-color-header-collapsed: var(
      --maui-color-interaction-interactionhover
    );
    --maui-collapsible-font-family-header: var(--maui-font-family-headline);
    --maui-collapsible-font-weight-nested: var(--maui-font-weight-bold);
    --maui-collapsible-padding-header: 13px 0;
    --maui-collapsible-border-color: var(--maui-color-grey-02);
    --maui-collapsible-section-padding: 0 var(--maui-spacing-4)
      var(--maui-spacing-4) 0;
    /* possible atomic violation 20 / 30 */
    --maui-collapsible-focus-outline-offset-y: 0px; /* top 0 bottom-o. -1 ?? */
    --maui-collapsible-focus-radius: 2px;
  }

  .lx .header {
    ${p({ size: "collapsible", tenant: "lx" })};
  }

  .lx.nested {
    --maui-collapsible-section-padding: var(--maui-spacing-3) 0
      var(--maui-spacing-5);

    margin-left: var(--maui-spacing-4);
  }

  .lx.nested .header {
    ${p({ size: "collapsible-nested", tenant: "lx" })};
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .lx,
    .lx.nested {
      --maui-collapsible-section-padding: var(--maui-spacing-3)
        var(--maui-spacing-4) var(--maui-spacing-4) 0;
    }

    .lx.nested {
      margin-left: var(--maui-spacing-4);
    }
  }
`, rv = s`
  .sn {
    --maui-collapsible-color-header: var(--maui-color-brand-sn-blue-3);
    --maui-collapsible-hover-color-header: var(--maui-color-brand-sn-blue-4);
    --maui-collapsible-font-family-header: var(--maui-font-family-headline);
    --maui-collapsible-font-weight-nested: var(--maui-font-weight-bold);
    --maui-collapsible-padding-header: 13px var(--maui-spacing-4);
    --maui-collapsible-section-padding: var(--maui-spacing-2)
      var(--maui-spacing-4) var(--maui-spacing-5);
    --maui-collapsible-focus-outline-offset-y: 0px; /* top-o 1 bottom-o. 0 ?? */
    --maui-collapsible-focus-radius: 0px;
  }
  .sn.collapsed .header {
    --maui-collapsible-font-weight-nested: var(--maui-font-weight-regular);
    font-weight: var(--maui-font-weight-regular);
  }

  .sn .header {
    ${p({ size: "collapsible", tenant: "sn" })};
  }

  .sn.nested {
    --maui-collapsible-padding-header: 13px var(--maui-spacing-3);
    --maui-collapsible-section-padding: var(--maui-spacing-3)
      var(--maui-spacing-3) var(--maui-spacing-5);
  }

  .sn.nested .header {
    ${p({ size: "collapsible-nested", tenant: "sn" })};
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .sn,
    .sn.nested {
      --maui-collapsible-section-padding: var(--maui-spacing-2) 15px
        var(--maui-spacing-5) 0;
      --maui-collapsible-padding-header: 13px 0;
    }

    .sn.nested {
      margin-left: 15px;
    }
  }
`, nv = s`
  ${xs("b2b")}

  .b2b .header {
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
  }

  .b2b:not(.collapsed) .header:hover {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }
`, sv = s`
  .four_y {
    --maui-collapsible-color-header: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-collapsible-hover-color-header: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-collapsible-font-family-header: var(--maui-font-family-headline);
    --maui-collapsible-font-weight-nested: var(--maui-font-weight-bold);
    --maui-collapsible-padding-header: var(--maui-spacing-3)
      var(--maui-spacing-4);
    --maui-collapsible-section-padding: 0 var(--maui-spacing-4)
      var(--maui-spacing-5);
    --maui-collapsible-focus-outline-offset-y: 0px; /* top-o 1 bottom-o. 0 ?? */
    --maui-collapsible-focus-radius: var(--maui-radii-default-radius);
    --maui-collapsible-font-weight-nested: var(--maui-font-weight-regular);
    --maui-collapsible-text-decoration-hover: underline;
  }
  .four_y.collapsed:not(.nested) .header {
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y .header {
    ${p({ size: "collapsible", tenant: "four_y" })};
  }

  .four_y.nested {
    --maui-collapsible-padding-header: var(--maui-spacing-3)
      var(--maui-spacing-3);
    --maui-collapsible-section-padding: 0 var(--maui-spacing-3)
      var(--maui-spacing-5);
  }

  .four_y.nested .header {
    ${p({ size: "collapsible-nested", tenant: "four_y" })};
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"