@solid-design-system/components 6.10.0 → 6.12.0

package/dist-versioned/chunks/chunk.UIQBHPD3.js

@@ -1,7 +1,7 @@
 // src/components/combobox/utils.ts
 var getAssignedElementsForSlot = (slot) => Array.from(slot.assignedElements({ flatten: true }));
-var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-6-10-0-option" ? item : Array.from(item.querySelectorAll(":scope > sd-6-10-0-option"));
-var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-10-0-optgroup";
+var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-6-12-0-option" ? item : Array.from(item.querySelectorAll(":scope > sd-6-12-0-option"));
+var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-12-0-optgroup";
 var getAllOptions = (items) => items.map(getOptionOrNestedOptions);
 var filterOnlyOptgroups = (items) => items.filter(isOptgroup);
 var normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

package/dist-versioned/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";
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-6-10-0-tab-${this.attrId}`;
+    this.componentId = `sd-6-12-0-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -73,7 +73,7 @@ var SdTab = class extends SolidElement {
     )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
       "absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
     )}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
-      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-10-0-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-12-0-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -110,7 +110,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-6-10-0-tab")
+  customElement("sd-6-12-0-tab")
 ], SdTab);
 
 export {

package/dist-versioned/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
@@ -208,7 +208,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[var(--width)] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[var(--width)] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:64px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ms-4 absolute top-2 end-2"><sd-6-10-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-10-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-10-0-icon></sd-6-10-0-button></div></header>` : html`<sd-6-10-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-10-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-10-0-icon></sd-6-10-0-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
+    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:64px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ms-4 absolute top-2 end-2"><sd-6-12-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-12-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-12-0-icon></sd-6-12-0-button></div></header>` : html`<sd-6-12-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-12-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-12-0-icon></sd-6-12-0-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
   }
 };
 SdDrawer.styles = [
@@ -250,7 +250,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-6-10-0-drawer")
+  customElement("sd-6-12-0-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/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
@@ -183,7 +183,7 @@ var SdDialog = class extends SolidElement {
     )}"><div part="overlay" class="fixed inset-0 overlay-color-background opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
       "panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-10-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-6-10-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-10-0-icon></sd-6-10-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-12-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-6-12-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-12-0-icon></sd-6-12-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
@@ -213,7 +213,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-6-10-0-dialog")
+  customElement("sd-6-12-0-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [

package/dist-versioned/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,
@@ -220,16 +220,16 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-6-10-0-popup part="base" exportparts="
+    return html`<sd-6-12-0-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-6-10-0-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-6-10-0-icon></button>`}<slot name="content" part="body" id="tooltip" class="sd-6-10-0-tooltip-color-background sd-6-10-0-tooltip-color-text py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-6-10-0-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-6-12-0-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-6-12-0-icon></button>`}<slot name="content" part="body" id="tooltip" class="sd-6-12-0-tooltip-color-background sd-6-12-0-tooltip-color-text py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-6-12-0-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-6-10-0-popup{--arrow-color:rgba(var(--sd-tooltip-color-background));--arrow-size:10px}sd-6-10-0-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-6-10-0-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-6-10-0-popup[placement^=top]::part(popup){transform-origin:bottom}sd-6-10-0-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}:host [slot=anchor]{color:rgba(var(--sd-form-control__tooltip-color-icon))}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
+:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-6-12-0-popup{--arrow-color:rgba(var(--sd-tooltip-color-background));--arrow-size:10px}sd-6-12-0-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-6-12-0-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-6-12-0-popup[placement^=top]::part(popup){transform-origin:bottom}sd-6-12-0-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}:host [slot=anchor]{color:rgba(var(--sd-form-control__tooltip-color-icon))}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -238,7 +238,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-6-10-0-popup")
+  query("sd-6-12-0-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -274,7 +274,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-6-10-0-tooltip")
+  customElement("sd-6-12-0-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/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";
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */
-        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "sd-6-10-0-badge--blue--inverted-color-text sd-6-10-0-badge--blue--inverted-color-background sd-6-10-0-badge--inverted-color-border",
-        green: !this.inverted ? "text-white sd-6-10-0-badge--green-color-background border-white" : "sd-6-10-0-badge--green-color--inverted-text sd-6-10-0-badge--green-color--inverted-background sd-6-10-0-badge--inverted-color-border",
-        red: !this.inverted ? "text-white sd-6-10-0-badge--red-color-background border-white" : "sd-6-10-0-badge--red--inverted-text sd-6-10-0-badge--red--inverted-background sd-6-10-0-badge--inverted-color-border"
+        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "sd-6-12-0-badge--blue--inverted-color-text sd-6-12-0-badge--blue--inverted-color-background sd-6-12-0-badge--inverted-color-border",
+        green: !this.inverted ? "text-white sd-6-12-0-badge--green-color-background border-white" : "sd-6-12-0-badge--green-color--inverted-text sd-6-12-0-badge--green-color--inverted-background sd-6-12-0-badge--inverted-color-border",
+        red: !this.inverted ? "text-white sd-6-12-0-badge--red-color-background border-white" : "sd-6-12-0-badge--red--inverted-text sd-6-12-0-badge--red--inverted-background sd-6-12-0-badge--inverted-color-border"
       }[this.variant]
     )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
   }
@@ -44,7 +44,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-6-10-0-badge")
+  customElement("sd-6-12-0-badge")
 ], SdBadge);
 
 export {

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-10-0-include")
+  customElement("sd-6-12-0-include")
 ], SdInclude);
 
 export {

package/dist-versioned/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-6-10-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-10-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-10-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-10-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-10-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-10-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-10-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-10-0-icon></button></div></div><sd-6-10-0-divider></sd-6-10-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="${() => {
+    )}"><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-12-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-12-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-12-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-12-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-12-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-12-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-12-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-12-0-icon></button></div></div><sd-6-12-0-divider></sd-6-12-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);
@@ -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-10-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-6-12-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-10-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-10-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-10-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-10-0-icon>` : ""}<sd-6-10-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-10-0-icon></div>${this.renderCalendar()}</sd-6-10-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)}`;
+    )}" 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-12-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-12-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-12-0-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-12-0-icon>` : ""}<sd-6-12-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-12-0-icon></div>${this.renderCalendar()}</sd-6-12-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-10-0-popup")
+  query("sd-6-12-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-10-0-datepicker")
+  customElement("sd-6-12-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-10-0-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-12-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-10-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-10-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-10-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-10-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)}`;
+    )}" 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-12-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-12-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-12-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-12-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-10-0-textarea")
+  customElement("sd-6-12-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-10-0-theme-listener")
+  customElement("sd-6-12-0-theme-listener")
 ], SdThemeListener);
 
 export {