@solid-design-system/components 6.10.0 → 6.12.0

package/dist/chunks/{chunk.RUNLTRYQ.js → chunk.SQKCQFZY.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,9 +41,16 @@ var SdStepGroup = class extends SolidElement {
           activeStep = index;
         }
       });
-      this.setActiveStep(activeStep || this.activeStep);
+      if (this.activeStep !== -1) {
+        this.setActiveStep(activeStep || this.activeStep);
+      }
     });
   }
+  handleActiveStepChange() {
+    const index = Number(this.activeStep);
+    if (Number.isNaN(index)) return;
+    this.setActiveStep(index);
+  }
   updateSize() {
     this.steps.forEach((step) => {
       step.size = this.size;
@@ -69,8 +76,10 @@ var SdStepGroup = class extends SolidElement {
           step.current = true;
         } else if (i > index) {
           step.waiting = true;
+          step.current = false;
         } else {
           step.current = false;
+          step.waiting = false;
         }
       });
     }
@@ -111,6 +120,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdStepGroup.prototype, "label", 2);
+__decorateClass([
+  watch("activeStep", { waitUntilFirstUpdate: true })
+], SdStepGroup.prototype, "handleActiveStepChange", 1);
 __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], SdStepGroup.prototype, "updateSize", 1);

package/dist/chunks/{chunk.FBFFDE7W.js → chunk.TAR64H3A.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.O5FDQ7G3.js → chunk.TEHZN5K4.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BNNE7OYM.js → chunk.URTSQLC4.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2VYY4TEV.js → chunk.UZPDIPPZ.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.C7TYKE3H.js → chunk.V5VJQQ73.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.6C4JDHQE.js → chunk.VFLTCSUA.js}

@@ -17,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   animateTo,
   parseDuration,

package/dist/chunks/{chunk.WPIZ42LA.js → chunk.VJNVCYUG.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.J6URFAAT.js → chunk.WIXKV24T.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.EV6PNOJR.js → chunk.XVLJVMWL.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -42,6 +42,32 @@ var isoDateConverter = {
     return value != null ? value : "";
   }
 };
+var viewMonthConverter = {
+  fromAttribute(value) {
+    if (!value) return null;
+    const cleaned = value.trim().replace(/[./]/g, "-");
+    let m = cleaned.match(/^(\d{2})-(\d{4})$/);
+    let month;
+    let year;
+    if (m) {
+      month = Number(m[1]);
+      year = Number(m[2]);
+    } else {
+      m = cleaned.match(/^(\d{4})-(\d{2})$/);
+      if (!m) return null;
+      year = Number(m[1]);
+      month = Number(m[2]);
+    }
+    if (!year || !month || month < 1 || month > 12) return null;
+    return new Date(year, month - 1, 1);
+  },
+  toAttribute(value) {
+    if (!value) return "";
+    const year = value.getFullYear();
+    const month = String(value.getMonth() + 1).padStart(2, "0");
+    return `${year}-${month}`;
+  }
+};
 var disabledDatesConverter = {
   fromAttribute(value) {
     if (!value) return [];
@@ -94,6 +120,7 @@ var SdDatepicker = class extends SolidElement {
     this.allowSameDayRange = false;
     this.min = void 0;
     this.max = void 0;
+    this.viewMonth = null;
     this.firstDayOfWeek = null;
     this.disabledWeekends = false;
     this.disabledDates = [];
@@ -376,7 +403,7 @@ var SdDatepicker = class extends SolidElement {
       }
     };
     this.onKeyDown = (ev) => {
-      var _a;
+      var _a, _b;
       if (this.disabled || this.visuallyDisabled || this.readonly) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -422,14 +449,16 @@ var SdDatepicker = class extends SolidElement {
       }
       if (handled) {
         ev.preventDefault();
-        const monthChanged = next.getMonth() !== this.viewMonth.getMonth() || next.getFullYear() !== this.viewMonth.getFullYear();
+        const viewMonth = (_a = this.viewMonth) != null ? _a : this.ensureViewMonth();
+        const monthChanged = next.getMonth() !== viewMonth.getMonth() || next.getFullYear() !== viewMonth.getFullYear();
         if (monthChanged) {
-          this.viewMonth = new Date(next.getFullYear(), next.getMonth(), 1);
-          const monthLabel = this.formatMonthYear(this.viewMonth);
+          const nextViewMonth = new Date(next.getFullYear(), next.getMonth(), 1);
+          this.viewMonth = nextViewMonth;
+          const monthLabel = this.formatMonthYear(nextViewMonth);
           this.setNavStatus(monthLabel);
         }
         const fd = DateUtils.startOfDayLocal(next);
-        if (fd.getTime() !== ((_a = this.focusedDate) == null ? void 0 : _a.getTime())) {
+        if (fd.getTime() !== ((_b = this.focusedDate) == null ? void 0 : _b.getTime())) {
           this.focusedDate = fd;
         }
         const dayLabel = fd.toLocaleDateString(this.locale, {
@@ -470,6 +499,7 @@ var SdDatepicker = class extends SolidElement {
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
   }
   connectedCallback() {
+    var _a;
     super.connectedCallback();
     this.syncDisabledDatesSet();
     document.addEventListener("click", this.handleOutsideClick);
@@ -479,9 +509,11 @@ var SdDatepicker = class extends SolidElement {
     });
     const initialSingle = this.value ? DateUtils.parseLocalISO(this.value) : null;
     const initialRangeStart = this.rangeStart ? DateUtils.parseLocalISO(this.rangeStart) : null;
-    const initial = this.range && initialRangeStart ? initialRangeStart : initialSingle != null ? initialSingle : DateUtils.startOfDayLocal(/* @__PURE__ */ new Date());
-    this.viewMonth = new Date(initial.getFullYear(), initial.getMonth(), 1);
-    this.focusedDate = DateUtils.clampDateToMonth(initial, this.viewMonth);
+    const initialFallback = DateUtils.startOfDayLocal(/* @__PURE__ */ new Date());
+    const initial = this.range && initialRangeStart ? initialRangeStart : initialSingle != null ? initialSingle : initialFallback;
+    const effectiveViewMonth = (_a = this.viewMonth) != null ? _a : new Date(initial.getFullYear(), initial.getMonth(), 1);
+    this.viewMonth = effectiveViewMonth;
+    this.focusedDate = DateUtils.clampDateToMonth(initial, effectiveViewMonth);
     if (this.firstDayOfWeek === null || this.firstDayOfWeek === void 0) {
       this.firstDayOfWeek = 1;
     }
@@ -513,6 +545,16 @@ var SdDatepicker = class extends SolidElement {
     }
     this.requestUpdate();
   }
+  handleViewMonthChange() {
+    var _a;
+    if (!this.viewMonth) return;
+    const pivot = this.focusedDate || this.range && this.rangeEnd && DateUtils.parseLocalISO(this.rangeEnd) || this.range && this.rangeStart && DateUtils.parseLocalISO(this.rangeStart) || this.value && DateUtils.parseLocalISO(this.value) || this.today;
+    if (!pivot) return;
+    const clamped = DateUtils.clampDateToMonth(pivot, this.viewMonth);
+    if (clamped.getTime() !== ((_a = this.focusedDate) == null ? void 0 : _a.getTime())) {
+      this.focusedDate = clamped;
+    }
+  }
   handleDisabledDatesChange() {
     this.syncDisabledDatesSet();
     this.requestUpdate();
@@ -937,24 +979,29 @@ var SdDatepicker = class extends SolidElement {
     this.emit("sd-focus");
   }
   setMonth(offset) {
-    const next = new Date(this.viewMonth.getFullYear(), this.viewMonth.getMonth() + offset, 1);
-    if (next.getMonth() === this.viewMonth.getMonth() && next.getFullYear() === this.viewMonth.getFullYear()) return;
+    var _a;
+    const viewMonth = (_a = this.viewMonth) != null ? _a : this.ensureViewMonth();
+    const next = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + offset, 1);
+    if (next.getMonth() === viewMonth.getMonth() && next.getFullYear() === viewMonth.getFullYear()) return;
     this.viewMonth = next;
-    const monthLabel = this.formatMonthYear(this.viewMonth);
+    const monthLabel = this.formatMonthYear(next);
     this.setNavStatus(monthLabel);
-    this.emit("sd-month-change", { detail: { month: this.viewMonth } });
+    this.emit("sd-month-change", { detail: { month: next } });
   }
   setYear(offset) {
-    const next = new Date(this.viewMonth.getFullYear() + offset, this.viewMonth.getMonth(), 1);
-    if (next.getFullYear() === this.viewMonth.getFullYear() && next.getMonth() === this.viewMonth.getMonth()) {
+    var _a;
+    const viewMonth = (_a = this.viewMonth) != null ? _a : this.ensureViewMonth();
+    const next = new Date(viewMonth.getFullYear() + offset, viewMonth.getMonth(), 1);
+    if (next.getFullYear() === viewMonth.getFullYear() && next.getMonth() === viewMonth.getMonth()) {
       return;
     }
     this.viewMonth = next;
-    const monthLabel = this.formatMonthYear(this.viewMonth);
+    const monthLabel = this.formatMonthYear(next);
     this.setNavStatus(monthLabel);
-    this.emit("sd-month-year", { detail: { month: this.viewMonth } });
+    this.emit("sd-month-year", { detail: { month: next } });
   }
   focusInitialGridDay() {
+    var _a;
     let target = null;
     if (!this.range && this.value) {
       const v = DateUtils.parseLocalISO(this.value);
@@ -966,20 +1013,21 @@ var SdDatepicker = class extends SolidElement {
       if (re) target = DateUtils.startOfDayLocal(re);
       else if (rs) target = DateUtils.startOfDayLocal(rs);
     }
+    const viewMonth = (_a = this.viewMonth) != null ? _a : this.ensureViewMonth();
     const inViewAndEnabled = (d) => {
       if (!d) return false;
-      const sameMonth = d.getFullYear() === this.viewMonth.getFullYear() && d.getMonth() === this.viewMonth.getMonth();
+      const sameMonth = d.getFullYear() === viewMonth.getFullYear() && d.getMonth() === viewMonth.getMonth();
       return sameMonth && !this.isDisabled(d);
     };
     if (!inViewAndEnabled(target)) {
-      const { weeks } = this.getMonthMatrix(this.viewMonth);
+      const { weeks } = this.getMonthMatrix(viewMonth);
       const todayInView = weeks.flat().find(
-        (day) => day.getMonth() === this.viewMonth.getMonth() && DateUtils.isSameDay(day, this.today) && !this.isDisabled(day)
+        (day) => day.getMonth() === viewMonth.getMonth() && DateUtils.isSameDay(day, this.today) && !this.isDisabled(day)
       );
       if (todayInView) {
         target = DateUtils.startOfDayLocal(todayInView);
       } else {
-        const firstEnabled = weeks.flat().find((day) => day.getMonth() === this.viewMonth.getMonth() && !this.isDisabled(day));
+        const firstEnabled = weeks.flat().find((day) => day.getMonth() === viewMonth.getMonth() && !this.isDisabled(day));
         target = firstEnabled ? DateUtils.startOfDayLocal(firstEnabled) : null;
       }
     }
@@ -1152,6 +1200,18 @@ var SdDatepicker = class extends SolidElement {
     if (this.range) this.selectRangeDate(d);
     else this.selectSingleDate(d);
   }
+  ensureViewMonth() {
+    if (this.viewMonth) {
+      return this.viewMonth;
+    }
+    const initialSingle = this.value ? DateUtils.parseLocalISO(this.value) : null;
+    const initialRangeStart = this.rangeStart ? DateUtils.parseLocalISO(this.rangeStart) : null;
+    const initialFallback = DateUtils.startOfDayLocal(/* @__PURE__ */ new Date());
+    const initial = this.range && initialRangeStart ? initialRangeStart : initialSingle != null ? initialSingle : initialFallback;
+    const effectiveViewMonth = new Date(initial.getFullYear(), initial.getMonth(), 1);
+    this.viewMonth = effectiveViewMonth;
+    return effectiveViewMonth;
+  }
   getMonthMatrix(monthRef) {
     var _a;
     const fdw = (_a = this.firstDayOfWeek) != null ? _a : 1;
@@ -1200,11 +1260,11 @@ var SdDatepicker = class extends SolidElement {
   }
   /** Chooses a tabbable day when tabbing into the grid (today or first enabled). */
   getTabTargetDayForCurrentView(weeks) {
-    const inViewToday = weeks.flat().find(
-      (d) => d.getMonth() === this.viewMonth.getMonth() && DateUtils.isSameDay(d, this.today) && !this.isDisabled(d)
-    );
+    var _a;
+    const viewMonth = (_a = this.viewMonth) != null ? _a : this.ensureViewMonth();
+    const inViewToday = weeks.flat().find((d) => d.getMonth() === viewMonth.getMonth() && DateUtils.isSameDay(d, this.today) && !this.isDisabled(d));
     if (inViewToday) return DateUtils.startOfDayLocal(inViewToday);
-    const firstEnabled = weeks.flat().find((d) => d.getMonth() === this.viewMonth.getMonth() && !this.isDisabled(d));
+    const firstEnabled = weeks.flat().find((d) => d.getMonth() === viewMonth.getMonth() && !this.isDisabled(d));
     return firstEnabled ? DateUtils.startOfDayLocal(firstEnabled) : null;
   }
   /** Mouse enter on a day: updates preview end when selecting a range. */
@@ -1225,9 +1285,10 @@ var SdDatepicker = class extends SolidElement {
     }
   }
   renderCalendar() {
-    var _a;
-    const { weeks } = this.getMonthMatrix(this.viewMonth);
-    const monthLabel = this.formatMonthYear(this.viewMonth);
+    var _a, _b;
+    const viewMonth = (_a = this.viewMonth) != null ? _a : this.ensureViewMonth();
+    const { weeks } = this.getMonthMatrix(viewMonth);
+    const monthLabel = this.formatMonthYear(viewMonth);
     const weekdays = this.weekdayLabels();
     const selectedSingle = this.value ? this.parseISO(this.value) : null;
     const rs = this.rangeStart ? this.parseISO(this.rangeStart) : null;
@@ -1241,15 +1302,15 @@ var SdDatepicker = class extends SolidElement {
     return html`<div part="datepicker" class="${cx(
       "w-[284px] z-50 bg-white py-3 px-4",
       this.open ? "block" : "hidden",
-      ((_a = this.currentPlacement) == null ? void 0 : _a.startsWith("bottom")) ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default",
+      ((_b = this.currentPlacement) == null ? void 0 : _b.startsWith("bottom")) ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default",
       "border-primary"
-    )}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-icon></button></div></div><sd-divider></sd-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
+    )}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base text-primary!" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-icon></button></div></div><sd-divider></sd-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
       this.tabbingIntoGrid = false;
     }}"><div class="grid-row grid-head grid grid-cols-7 gap-y-[1px]" role="row">${weekdays.map(
       (w, colIndex) => html`<div role="columnheader" aria-colindex="${colIndex + 1}" part="weekday" class="cell head flex items-center justify-center font-bold text-black text-sm leading-none h-8" aria-label="${w}" title="${w}" id="${"col-" + (colIndex + 1)}">${w}</div>`
     )}</div>${weeks.map(
       (week, rowIndex) => html`<div class="grid-row grid grid-cols-7 ${rowIndex === 0 ? "mt-2" : ""}" role="row" aria-rowindex="${rowIndex + 2}">${week.map((day, colIndex) => {
-        const inMonth = day.getMonth() === this.viewMonth.getMonth();
+        const inMonth = day.getMonth() === viewMonth.getMonth();
         const disabled = this.isDisabled(day) || !this.inMinMax(day);
         const isFocused = DateUtils.isSameDay(day, this.focusedDate);
         const isToday = DateUtils.isSameDay(day, this.today);
@@ -1352,12 +1413,12 @@ var SdDatepicker = class extends SolidElement {
       this.readonly ? "bg-neutral-100" : "bg-white",
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}" slot="anchor"><input id="input" type="text" role="combobox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="dialog" aria-controls="calendar-grid" aria-describedby="${hasHelpText ? "help-text" : void 0}" aria-invalid="${this.showInvalidStyle ? "true" : "false"}" aria-label="${this.range ? "Select date range" : "Select a date"}" class="${cx(
-      "min-w-0 flex-grow focus:outline-none bg-transparent hover:cursor-pointer form-control-color-text",
+      "min-w-0 grow focus:outline-none bg-transparent hover:cursor-pointer form-control-color-text",
       this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       textSize,
       this.floatingLabel && "mt-4"
-    )}" autocomplete="off" spellcheck="false" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder") : ""}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""}<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-icon></div>${this.renderCalendar()}</sd-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
+    )}" autocomplete="off" spellcheck="false" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder") : ""}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""}<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-icon></div>${this.renderCalendar()}</sd-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 SdDatepicker.styles = [
@@ -1389,6 +1450,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, converter: isoDateConverter, reflect: true })
 ], SdDatepicker.prototype, "max", 2);
+__decorateClass([
+  property({ attribute: "view-month", converter: viewMonthConverter })
+], SdDatepicker.prototype, "viewMonth", 2);
 __decorateClass([
   property({ type: Number })
 ], SdDatepicker.prototype, "firstDayOfWeek", 2);
@@ -1446,9 +1510,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], SdDatepicker.prototype, "open", 2);
-__decorateClass([
-  state()
-], SdDatepicker.prototype, "viewMonth", 2);
 __decorateClass([
   state()
 ], SdDatepicker.prototype, "focusedDate", 2);
@@ -1497,6 +1558,9 @@ __decorateClass([
 __decorateClass([
   watch("locale")
 ], SdDatepicker.prototype, "handleLocaleChange", 1);
+__decorateClass([
+  watch("viewMonth")
+], SdDatepicker.prototype, "handleViewMonthChange", 1);
 __decorateClass([
   watch("disabledDates")
 ], SdDatepicker.prototype, "handleDisabledDatesChange", 1);

package/dist/chunks/{chunk.OGTB6P4O.js → chunk.Y3THGL6Z.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.Q3NYSE4V.js → chunk.Z5DZQTVN.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.OS5UP6YI.js → chunk.ZRHUI65H.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.Z7C6DHQC.js → chunk.ZXKZDONO.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.YR42X3WU.js";
+} from "./chunk.KH2LWYO6.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/components/accordion/accordion.js

@@ -1,9 +1,9 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.Q7RGLPOU.js";
+} from "../../chunks/chunk.JVFY4KAV.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.EHRCG4D4.js";
+import "../../chunks/chunk.F733OTL5.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -14,7 +14,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YR42X3WU.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/accordion-group/accordion-group.js

@@ -1,10 +1,10 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.2NECRQLL.js";
-import "../../chunks/chunk.Q7RGLPOU.js";
+} from "../../chunks/chunk.PZZI7LIX.js";
+import "../../chunks/chunk.JVFY4KAV.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.EHRCG4D4.js";
+import "../../chunks/chunk.F733OTL5.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YR42X3WU.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/animation/animation.js

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.Z36ZVOCO.js";
+} from "../../chunks/chunk.CPEBS32D.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YR42X3WU.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.js

@@ -1,18 +1,18 @@
 import {
   SdAudio
-} from "../../chunks/chunk.XIMHYPRX.js";
-import "../../chunks/chunk.2VYY4TEV.js";
+} from "../../chunks/chunk.FN3QPQKW.js";
+import "../../chunks/chunk.UZPDIPPZ.js";
 import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.ALSMMO52.js";
-import "../../chunks/chunk.ENPYKZSE.js";
+import "../../chunks/chunk.OA6QSAEX.js";
+import "../../chunks/chunk.J7P25XPS.js";
 import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.EHRCG4D4.js";
+import "../../chunks/chunk.F733OTL5.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -23,7 +23,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YR42X3WU.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.WPIZ42LA.js";
-import "../../chunks/chunk.YR42X3WU.js";
+} from "../../chunks/chunk.VJNVCYUG.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/brandshape/brandshape.js

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.O5FDQ7G3.js";
-import "../../chunks/chunk.YR42X3WU.js";
+} from "../../chunks/chunk.TEHZN5K4.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,13 +1,13 @@
 import {
   SdBreadcrumb
-} from "../../chunks/chunk.L4VSO6PJ.js";
-import "../../chunks/chunk.2YKSAZET.js";
-import "../../chunks/chunk.KXWU6HY5.js";
+} from "../../chunks/chunk.Q2YJAMQO.js";
+import "../../chunks/chunk.K5MFIQWD.js";
+import "../../chunks/chunk.HMYRJJSA.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.EHRCG4D4.js";
+import "../../chunks/chunk.F733OTL5.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";
 import "../../chunks/chunk.6SPABX2F.js";
@@ -18,7 +18,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YR42X3WU.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/breadcrumb-item/breadcrumb-item.js

@@ -1,13 +1,13 @@
 import {
   SdBreadcrumbItem
-} from "../../chunks/chunk.VTOWPUO4.js";
-import "../../chunks/chunk.AGALXK7Q.js";
+} from "../../chunks/chunk.KMMZFIBW.js";
+import "../../chunks/chunk.5V4ZLM46.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";
 import "../../chunks/chunk.M6QWSNU3.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YR42X3WU.js";
+import "../../chunks/chunk.KH2LWYO6.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {