@solid-design-system/components 6.9.2 → 6.11.0

package/dist-versioned/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";
@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-6-9-2-include")
+  customElement("sd-6-11-0-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.WYVFRQ5Z.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-6-9-2-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-9-2-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-6-9-2-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-9-2-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-6-9-2-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-9-2-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-6-9-2-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-9-2-icon></button></div></div><sd-6-9-2-divider></sd-6-9-2-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-6-11-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-11-0-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-6-11-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-11-0-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-6-11-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-11-0-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-6-11-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-11-0-icon></button></div></div><sd-6-11-0-divider></sd-6-11-0-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);
@@ -1330,7 +1391,7 @@ var SdDatepicker = class extends SolidElement {
       this.disabled && "pointer-events-none",
       this.visuallyDisabled && "cursor-not-allowed"
     )}">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
-      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
+      "absolute left-4 z-10 pointer-events-none transition-all duration-200",
       !isFloatingLabelActive ? "top-1/2 -translate-y-1/2" : this.size === "lg" ? "top-2 text-xs" : "top-1 text-xs",
       isFloatingLabelActive && "mt-1"
     )}" for="input"><span class="${cx(
@@ -1343,7 +1404,7 @@ var SdDatepicker = class extends SolidElement {
       this.open && this.alignment === "left" ? "rounded-bl-none" : "",
       this.open && this.alignment === "right" ? "rounded-br-none" : "",
       this.open && (((_a = this.currentPlacement) == null ? void 0 : _a.startsWith("bottom")) ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
-    )}"></div><sd-6-9-2-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-6-11-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
       "inline-flex relative w-full",
       ((_b = this.currentPlacement) == null ? void 0 : _b.startsWith("bottom")) ? "origin-top" : "origin-bottom"
     )}" placement="${this.alignment === "left" ? `${this.placement}-start` : `${this.placement}-end`}" flip shift auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
@@ -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-6-9-2-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-9-2-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-9-2-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-9-2-icon>` : ""}<sd-6-9-2-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-9-2-icon></div>${this.renderCalendar()}</sd-6-9-2-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-6-11-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-11-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-11-0-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-11-0-icon>` : ""}<sd-6-11-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-11-0-icon></div>${this.renderCalendar()}</sd-6-11-0-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);
@@ -1483,7 +1544,7 @@ __decorateClass([
   state()
 ], SdDatepicker.prototype, "inputValue", 2);
 __decorateClass([
-  query("sd-6-9-2-popup")
+  query("sd-6-11-0-popup")
 ], SdDatepicker.prototype, "popup", 2);
 __decorateClass([
   query("#invalid-message")
@@ -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);
@@ -1514,7 +1578,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdDatepicker.prototype, "handleSizeChange", 1);
 SdDatepicker = __decorateClass([
-  customElement("sd-6-9-2-datepicker")
+  customElement("sd-6-11-0-datepicker")
 ], SdDatepicker);
 
 export {

package/dist-versioned/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";
@@ -224,7 +224,7 @@ var SdTextarea = class extends SolidElement {
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "form-control-color-text",
       ["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-9-2-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-11-0-icon]:pe-8",
       {
         sm: isFloatingLabelActive ? "pb-1" : "py-2",
         md: isFloatingLabelActive ? "pb-1" : "py-2",
@@ -232,7 +232,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-6-9-2-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-9-2-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-9-2-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-9-2-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-6-11-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-11-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-11-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-11-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 /**
@@ -353,7 +353,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-6-9-2-textarea")
+  customElement("sd-6-11-0-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/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";
@@ -53,7 +53,7 @@ SdThemeListener.styles = [
 :host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}`
 ];
 SdThemeListener = __decorateClass([
-  customElement("sd-6-9-2-theme-listener")
+  customElement("sd-6-11-0-theme-listener")
 ], SdThemeListener);
 
 export {

package/dist-versioned/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";
@@ -46,9 +46,9 @@ var SdTeaserMedia = class extends SolidElement {
       "absolute inset-0 pointer-events-none",
       {
         white: "bg-white/[.8] group-hover:bg-white/90",
-        "neutral-100": "sd-6-9-2-teaser-media--neutral-100-color-background group-hover:sd-6-9-2-teaser-media--neutral-100--hover-color-background",
+        "neutral-100": "sd-6-11-0-teaser-media--neutral-100-color-background group-hover:sd-6-11-0-teaser-media--neutral-100--hover-color-background",
         primary: "bg-primary/[.8] text-white group-hover:bg-primary/90",
-        "primary-100": "sd-6-9-2-teaser-media--primary-100-color-background group-hover:sd-6-9-2-teaser-media--primary-100--hover-color-background",
+        "primary-100": "sd-6-11-0-teaser-media--primary-100-color-background group-hover:sd-6-11-0-teaser-media--primary-100--hover-color-background",
         "gradient-light": "bg-gradient-to-t from-white/90 to-white/[.8]",
         "gradient-dark": "bg-gradient-to-t from-primary-800/90 to-primary-800/[.8]"
       }[this.variant]
@@ -56,11 +56,11 @@ var SdTeaserMedia = class extends SolidElement {
       "mt-3 transition-opacity duration-300",
       !this.open && "hidden",
       this.open ? "opacity-100" : "opacity-0"
-    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div>${slots["teaser-has-expandable"] ? html`<button part="toggle" class="sd-interactive sd-interactive--reset mt-2" @click="${this.onToggleClick}" aria-expanded="${this.open}" aria-label="${this.open ? "Collapse content" : "Expand content"}"><div class="h-full justify-start flex items-start"><sd-6-9-2-icon class="${cx(
+    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div>${slots["teaser-has-expandable"] ? html`<button part="toggle" class="sd-interactive sd-interactive--reset mt-2" @click="${this.onToggleClick}" aria-expanded="${this.open}" aria-label="${this.open ? "Collapse content" : "Expand content"}"><div class="h-full justify-start flex items-start"><sd-6-11-0-icon class="${cx(
       "w-6 h-6 transition-transform",
       this.open && "rotate-180",
       ["primary", "gradient-dark"].includes(this.variant) ? "text-white" : "text-primary"
-    )}" library="_internal" name="chevron-down"></sd-6-9-2-icon></div></button>` : null}</div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
+    )}" library="_internal" name="chevron-down"></sd-6-11-0-icon></div></button>` : null}</div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
   }
 };
 SdTeaserMedia.styles = [
@@ -81,7 +81,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-6-9-2-teaser-media")
+  customElement("sd-6-11-0-teaser-media")
 ], SdTeaserMedia);
 
 export {

package/dist-versioned/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";
@@ -115,14 +115,14 @@ var SdSwitch = class extends SolidElement {
       `relative flex flex-initial items-center justify-center border rounded-full h-4 w-8 transition-colors ease duration-100
             peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
             peer-focus-visible:outline-primary transition-colors ease-in-out duration-medium hover:duration-fast`,
-      this.disabled && this.checked ? "bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? this.checked ? "border-error bg-error hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : "border-error bg-white hover:border-error-400 hover:bg-white group-hover:border-error-400 group-hover:bg-white" : this.checked ? "border-accent hover:sd-6-9-2-switch--checked--hover-color-background bg-accent hover:border-accent-550 group-hover:sd-6-9-2-switch--checked--hover-color-background" : "sd-6-9-2-switch--unchecked-color-border bg-white hover:bg-neutral-200 group-hover:bg-neutral-200"
+      this.disabled && this.checked ? "bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? this.checked ? "border-error bg-error hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : "border-error bg-white hover:border-error-400 hover:bg-white group-hover:border-error-400 group-hover:bg-white" : this.checked ? "border-accent hover:sd-6-11-0-switch--checked--hover-color-background bg-accent hover:border-accent-550 group-hover:sd-6-11-0-switch--checked--hover-color-background" : "sd-6-11-0-switch--unchecked-color-border bg-white hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}"><span id="thumb" part="thumb" class="${cx(
       "w-2.5 h-2.5 rounded-full transition[transform,colors] ease-in-out duration-medium",
-      this.disabled && this.checked ? "translate-x-2" : this.disabled ? "-translate-x-2" : this.showInvalidStyle ? this.checked ? "translate-x-2" : "bg-error -translate-x-2 hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : this.checked ? "translate-x-2" : "-translate-x-2 sd-6-9-2-switch--unchecked__icon-color-background"
+      this.disabled && this.checked ? "translate-x-2" : this.disabled ? "-translate-x-2" : this.showInvalidStyle ? this.checked ? "translate-x-2" : "bg-error -translate-x-2 hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : this.checked ? "translate-x-2" : "-translate-x-2 sd-6-11-0-switch--unchecked__icon-color-background"
     )}"></span> </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
-      this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "sd-6-9-2-switch-color-text"
-    )}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-6-9-2-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-9-2-icon>` : ""} ${this.formControlController.renderInvalidMessage("lg")}</div>`;
+      this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "sd-6-11-0-switch-color-text"
+    )}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-6-11-0-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-11-0-icon>` : ""} ${this.formControlController.renderInvalidMessage("lg")}</div>`;
   }
 };
 /**
@@ -173,7 +173,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-6-9-2-switch")
+  customElement("sd-6-11-0-switch")
 ], SdSwitch);
 
 export {

package/dist-versioned/components/accordion/accordion.d.ts

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-9-2-accordion': SdAccordion;
+        'sd-6-11-0-accordion': SdAccordion;
     }
 }

package/dist-versioned/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-versioned/components/accordion-group/accordion-group.d.ts

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-9-2-accordion-group': SdAccordionGroup;
+        'sd-6-11-0-accordion-group': SdAccordionGroup;
     }
 }

package/dist-versioned/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-versioned/components/animation/animation.d.ts

@@ -34,6 +34,6 @@ export default class SdAnimation extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-9-2-animation': SdAnimation;
+        'sd-6-11-0-animation': SdAnimation;
     }
 }

package/dist-versioned/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-versioned/components/audio/audio.d.ts

@@ -58,6 +58,6 @@ export default class SdAudio extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-9-2-audio': SdAudio;
+        'sd-6-11-0-audio': SdAudio;
     }
 }