@solid-design-system/components 6.22.0 → 6.22.2

package/dist-versioned/chunks/{chunk.3P3ZLPSI.js → chunk.PDGRG77N.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -92,7 +92,7 @@ var SdStep = class extends SolidElement {
       this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" || this.size === "xs" ? "mt-1" : "mt-3"
     );
     const circleButtonClasses = cx(
-      "border sd-6-22-0-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      "border sd-6-22-2-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
       this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
       this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : this.size === "xs" ? "w-2" : "w-12" : this.size === "lg" ? "w-12" : this.size === "xs" ? "w-2" : "w-8",
       this.disabled && "border-neutral-500 text-neutral-500",
@@ -110,8 +110,8 @@ var SdStep = class extends SolidElement {
     )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${circleAndTailContainerClasses}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || this.waiting || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined(this.notInteractive || this.waiting || !hasLabel ? void 0 : "label")}" aria-describedby="${ifDefined(this.notInteractive || this.waiting || !hasDescription ? void 0 : "description")}" class="${circleButtonClasses}"><slot name="circle-content" class="${cx(
       "text-lg",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
-      this.notInteractive && "sd-6-22-0-step-color-text"
-    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== "xs" ? html`<sd-6-22-0-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-22-0-icon>` : this.size === "xs" ? "" : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
+      this.notInteractive && "sd-6-22-2-step-color-text"
+    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== "xs" ? html`<sd-6-22-2-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-22-2-icon>` : this.size === "xs" ? "" : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
       "flex w-full",
       hasLabel && "gap-2",
       this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
@@ -152,7 +152,7 @@ var SdStep = class extends SolidElement {
 SdStep.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) (:not([notInteractive])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-22-0-icon,slot[name=circle-content]::slotted(sd-6-22-0-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-6-22-0-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-6-22-0-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
+:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) (:not([notInteractive])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-22-2-icon,slot[name=circle-content]::slotted(sd-6-22-2-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-6-22-2-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-6-22-2-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -203,7 +203,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-6-22-0-step")
+  customElement("sd-6-22-2-step")
 ], SdStep);
 
 export {

package/dist-versioned/chunks/{chunk.RMSZCVAI.js → chunk.PZ7R7SI7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -57,13 +57,13 @@ var SdTeaser = class extends SolidElement {
       "teaser-has-headline": this.hasSlotController.test("headline")
     };
     return html`<div class="${cx(
-      "flex sd-6-22-0-teaser-border-radius",
+      "flex sd-6-22-2-teaser-border-radius",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-22-0-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-22-0-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-22-2-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-22-2-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-22-0-teaser--primary-100-color-background"
+        "primary-100": "sd-6-22-2-teaser--primary-100-color-background"
       }[this.variant],
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
@@ -105,7 +105,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-6-22-0-teaser")
+  customElement("sd-6-22-2-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.4CYDINDB.js → chunk.QP4KPI6Z.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.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-22-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-22-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-22-0-icon></sd-6-22-0-button></div></header>` : html`<sd-6-22-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-22-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-22-0-icon></sd-6-22-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-22-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-22-2-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-22-2-icon></sd-6-22-2-button></div></header>` : html`<sd-6-22-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-22-2-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-22-2-icon></sd-6-22-2-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-22-0-drawer")
+  customElement("sd-6-22-2-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.BR5PPGBX.js → chunk.QQO73GC3.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-6-22-0-radio group flex items-center text-base leading-normal text-black cursor-pointer",
+      "sd-6-22-2-radio group flex items-center text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -80,15 +80,15 @@ var SdRadio = class extends SolidElement {
         lg: "text-base"
       }[this.size]
     )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
-      "flex-initial shrink-0 relative inline-flex items-center justify-center border sd-6-22-0-radio-border-width rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
+      "flex-initial shrink-0 relative inline-flex items-center justify-center border sd-6-22-2-radio-border-width rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
       this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? cx(
         "border-error hover:border-error-400 group-hover:border-error-400",
-        this.checked ? "sd-6-22-0-radio--checked--invalid--default-color-background" : "sd-6-22-0-radio--default--invalid-color-background"
-      ) : this.checked ? "sd-6-22-0-radio--checked--default-color-background hover:sd-6-22-0-radio--checked--hover-color-background group-hover:sd-6-22-0-radio--checked--hover-color-background border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
+        this.checked ? "sd-6-22-2-radio--checked--invalid--default-color-background" : "sd-6-22-2-radio--default--invalid-color-background"
+      ) : this.checked ? "sd-6-22-2-radio--checked--default-color-background hover:sd-6-22-2-radio--checked--hover-color-background group-hover:sd-6-22-2-radio--checked--hover-color-background border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}"><span part="checked" class="${cx(
-      "rounded-full inline-flex text-white sd-6-22-0-radio__checked-height sd-6-22-0-radio__checked-width transition-[transform, colors] duration-medium ease-in-out",
+      "rounded-full inline-flex text-white sd-6-22-2-radio__checked-height sd-6-22-2-radio__checked-width transition-[transform, colors] duration-medium ease-in-out",
       this.checked ? "scale-100" : "scale-0",
-      this.disabled ? "sd-6-22-0-radio--checked--disabled__icon-color-background" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-6-22-0-radio--checked--invalid--default__icon-color-background hover:sd-6-22-0-radio--checked--invalid--hover__icon-color-background group-hover:sd-6-22-0-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-6-22-0-radio--checked--default__icon-color-background hover:sd-6-22-0-radio--checked--hover__icon-color-background group-hover:sd-6-22-0-radio--checked--hover__icon-color-background" : "bg-neutral-800"
+      this.disabled ? "sd-6-22-2-radio--checked--disabled__icon-color-background" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-6-22-2-radio--checked--invalid--default__icon-color-background hover:sd-6-22-2-radio--checked--invalid--hover__icon-color-background group-hover:sd-6-22-2-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-6-22-2-radio--checked--default__icon-color-background hover:sd-6-22-2-radio--checked--hover__icon-color-background group-hover:sd-6-22-2-radio--checked--hover__icon-color-background" : "bg-neutral-800"
     )}"></span></span><slot part="label" class="${cx(
       "ml-2 select-none inline-block",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-black"
@@ -131,7 +131,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-6-22-0-radio")
+  customElement("sd-6-22-2-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.UF4HXV3V.js → chunk.QVZRJYXK.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -211,22 +211,22 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-6-22-0-icon name="${{
+    )}"><sd-6-22-2-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-22-0-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-22-2-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
-      "border-solid border-[1px] border-l-0 sd-6-22-0-notification-color-border",
+      "border-solid border-[1px] border-l-0 sd-6-22-2-notification-color-border",
       {
-        info: "sd-6-22-0-notification--info-color-background",
-        success: "sd-6-22-0-notification--success-color-background",
-        warning: "sd-6-22-0-notification--warning-color-background",
-        error: "sd-6-22-0-notification--error-color-background"
+        info: "sd-6-22-2-notification--info-color-background",
+        success: "sd-6-22-2-notification--success-color-background",
+        warning: "sd-6-22-2-notification--warning-color-background",
+        error: "sd-6-22-2-notification--error-color-background"
       }[this.variant]
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-22-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-22-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-22-0-icon></sd-6-22-0-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(
-      `absolute w-0 h-[2px] bottom-0 sd-6-22-0-notification__duration-indicator-color-background z-10 animate-grow`
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-22-2-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-22-2-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-22-2-icon></sd-6-22-2-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(
+      `absolute w-0 h-[2px] bottom-0 sd-6-22-2-notification__duration-indicator-color-background z-10 animate-grow`
     )}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
   }
 };
@@ -272,7 +272,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-6-22-0-notification")
+  customElement("sd-6-22-2-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.SLUGXG7E.js → chunk.R7T5GVG2.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,7 +17,7 @@ var SdSkeleton = class extends SolidElement {
   }
   render() {
     return html`<div part="base" aria-hidden="true" class="${cx(
-      "sd-6-22-0-skeleton-color w-full h-full animate-pulse",
+      "sd-6-22-2-skeleton-color w-full h-full animate-pulse",
       {
         rectangular: "rounded-sm",
         circular: "rounded-full inline-block"
@@ -34,7 +34,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdSkeleton.prototype, "variant", 2);
 SdSkeleton = __decorateClass([
-  customElement("sd-6-22-0-skeleton")
+  customElement("sd-6-22-2-skeleton")
 ], SdSkeleton);
 
 export {

package/dist-versioned/chunks/{chunk.RS7M5R4R.js → chunk.RAAP5457.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<div class="flex flex-col"><label part="base" class="${cx(
-      "sd-6-22-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-6-22-2-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -127,7 +127,7 @@ var SdCheckbox = class extends SolidElement {
         lg: "text-base"
       }[this.size]
     )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
-      "relative flex flex-shrink-0 items-center justify-center border sd-6-22-0-checkbox-border-width rounded-sm h-4 w-4",
+      "relative flex flex-shrink-0 items-center justify-center border sd-6-22-2-checkbox-border-width rounded-sm h-4 w-4",
       "transition-colors ease-in-out duration-medium group-hover:duration-fast",
       "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary outline-transparent",
       {
@@ -160,10 +160,10 @@ var SdCheckbox = class extends SolidElement {
         filled: "bg-accent group-hover:bg-accent-550",
         default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}"></div></div>${this.checked ? html`<sd-6-22-0-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-22-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-22-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-22-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-6-22-2-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-22-2-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-22-2-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-22-2-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-black"
-    )}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-6-22-0-icon id="invalid-icon" part="invalid-icon" library="_internal" name="risk"></sd-6-22-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
+    )}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-6-22-2-icon id="invalid-icon" part="invalid-icon" library="_internal" name="risk"></sd-6-22-2-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
   }
 };
 /**
@@ -223,7 +223,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-6-22-0-checkbox")
+  customElement("sd-6-22-2-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.J3RX4Y6S.js → chunk.RCP5M6QU.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -62,7 +62,7 @@ var SdStepGroup = class extends SolidElement {
     });
   }
   getAllSteps() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-22-0-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-22-2-step");
   }
   /**
    * Sets the active step.
@@ -137,7 +137,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-6-22-0-step-group")
+  customElement("sd-6-22-2-step-group")
 ], SdStepGroup);
 
 export {

package/dist-versioned/chunks/{chunk.H3SVUQP3.js → chunk.SBKXOLDW.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -91,14 +91,14 @@ var SdOption = class extends SolidElement {
       this.disabled && "border-neutral-500 top-1",
       !this.disabled && this.hasHover ? "h-full top-0" : "top-1"
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
-      "relative flex flex-shrink-0 items-center justify-center border sd-6-22-0-checkbox-border-width rounded-sm h-4 w-4 mr-2",
+      "relative flex flex-shrink-0 items-center justify-center border sd-6-22-2-checkbox-border-width rounded-sm h-4 w-4 mr-2",
       {
         sm: "mt-0.5",
         md: "mt-1",
         lg: "mt-1"
       }[this.size],
-      this.disabled ? "sd-6-22-0-option--disabled-color-border" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
-    )}">${this.selected ? html`<sd-6-22-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-22-0-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+      this.disabled ? "sd-6-22-2-option--disabled-color-border" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
+    )}">${this.selected ? html`<sd-6-22-2-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-22-2-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 /**
@@ -107,7 +107,7 @@ var SdOption = class extends SolidElement {
 SdOption.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;display:block;width:100%;--tw-outline-style:none!important;outline-style:none!important}.focus-outline-offset{outline-offset:-2px}.sd-6-22-0-option--disabled-color-border{border-color:rgb(var(--sd-option--disabled-color-border))}`
+:host{position:relative;display:block;width:100%;--tw-outline-style:none!important;outline-style:none!important}.focus-outline-offset{outline-offset:-2px}.sd-6-22-2-option--disabled-color-border{border-color:rgb(var(--sd-option--disabled-color-border))}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -146,7 +146,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-6-22-0-option")
+  customElement("sd-6-22-2-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.D2XKPNOP.js → chunk.SZOMTQQW.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
     this.isTruncated = false;
   }
   get items() {
-    return this.querySelectorAll("sd-6-22-0-breadcrumb-item");
+    return this.querySelectorAll("sd-6-22-2-breadcrumb-item");
   }
   cacheItemPositions() {
     this.items.forEach((item) => {
@@ -67,12 +67,12 @@ var SdBreadcrumb = class extends SolidElement {
   }
   handleMobileChevron() {
     var _a, _b, _c;
-    const icon = document.createElement("sd-6-22-0-icon");
+    const icon = document.createElement("sd-6-22-2-icon");
     icon.setAttribute("slot", "icon-left");
     icon.setAttribute("library", "_internal");
     icon.setAttribute("name", "chevron-left");
     icon.setAttribute("class", "text-base me-1 lg:hidden");
-    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-22-0-link")) == null ? void 0 : _c.appendChild(icon);
+    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-22-2-link")) == null ? void 0 : _c.appendChild(icon);
   }
   handleSlotChange() {
     this.handleMobileChevron();
@@ -87,13 +87,13 @@ var SdBreadcrumb = class extends SolidElement {
     this.resizeObserver.unobserve(this);
   }
   render() {
-    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-22-0-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-22-0-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
+    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-22-2-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-22-2-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
   }
 };
 SdBreadcrumb.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block}::slotted(sd-6-22-0-breadcrumb-item:not(:last-of-type))::after,sd-6-22-0-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-22-0-breadcrumb-item:not(:last-of-type))::after,sd-6-22-0-dropdown::after{display:inline-block}}::slotted(sd-6-22-0-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-22-0-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,rgba(var(--sd-color-accent))))}}::slotted(sd-6-22-0-breadcrumb-item),sd-6-22-0-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-22-0-breadcrumb-item),sd-6-22-0-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{position:relative;display:block}::slotted(sd-6-22-2-breadcrumb-item:not(:last-of-type))::after,sd-6-22-2-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-22-2-breadcrumb-item:not(:last-of-type))::after,sd-6-22-2-dropdown::after{display:inline-block}}::slotted(sd-6-22-2-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-22-2-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,rgba(var(--sd-color-accent))))}}::slotted(sd-6-22-2-breadcrumb-item),sd-6-22-2-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-22-2-breadcrumb-item),sd-6-22-2-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -117,7 +117,7 @@ __decorateClass([
   state()
 ], SdBreadcrumb.prototype, "isTruncated", 2);
 SdBreadcrumb = __decorateClass([
-  customElement("sd-6-22-0-breadcrumb")
+  customElement("sd-6-22-2-breadcrumb")
 ], SdBreadcrumb);
 
 export {

package/dist-versioned/chunks/{chunk.SB4P52KM.js → chunk.T54LXOQ5.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -209,7 +209,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-6-22-0-animation")
+  customElement("sd-6-22-2-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.JQBYEVD6.js → chunk.TFJLCKDW.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -42,16 +42,16 @@ var SdAccordionGroup = class extends SolidElement {
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(sd-6-22-0-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
+:host{display:block}::slotted(sd-6-22-2-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-6-22-0-accordion" })
+  queryAssignedElements({ selector: "sd-6-22-2-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-6-22-0-accordion-group")
+  customElement("sd-6-22-2-accordion-group")
 ], SdAccordionGroup);
 
 export {

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

@@ -0,0 +1,85 @@
+// src/components/datepicker/datepicker-converters.ts
+var isoDateConverter = {
+  fromAttribute(value) {
+    if (!value) return null;
+    const cleaned = value.trim().replace(/[./]/g, "-");
+    const match = cleaned.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match) return null;
+    const iso = `${match[1]}-${match[2]}-${match[3]}`;
+    const d = new Date(+match[1], +match[2] - 1, +match[3]);
+    if (d.getFullYear() !== +match[1] || d.getMonth() !== +match[2] - 1 || d.getDate() !== +match[3]) {
+      return null;
+    }
+    return iso;
+  },
+  toAttribute(value) {
+    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 [];
+    let rawList = [];
+    const trimmed = value.trim();
+    if (trimmed.startsWith("[")) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        if (Array.isArray(parsed)) {
+          rawList = parsed.map(String);
+        }
+      } catch (e) {
+        return [];
+      }
+    } else {
+      rawList = trimmed.split(/[\s,]+/).map((v) => v.trim()).filter(Boolean);
+    }
+    const result = [];
+    for (const raw of rawList) {
+      const cleaned = raw.replace(/[-/]/g, ".");
+      const parts = cleaned.split(".");
+      if (parts.length !== 3) continue;
+      const [yyyy, mm, dd] = parts.map(Number);
+      if (!yyyy || !mm || !dd) continue;
+      const date = new Date(yyyy, mm - 1, dd);
+      if (date.getFullYear() !== yyyy || date.getMonth() !== mm - 1 || date.getDate() !== dd) continue;
+      const iso = `${yyyy}-${String(mm).padStart(2, "0")}-${String(dd).padStart(2, "0")}`;
+      result.push(iso);
+    }
+    return result;
+  },
+  toAttribute(value) {
+    return value ? value.join(",") : "";
+  }
+};
+
+export {
+  isoDateConverter,
+  viewMonthConverter,
+  disabledDatesConverter
+};

package/dist-versioned/chunks/{chunk.7AGLFNJK.js → chunk.TSMFJY5S.js}

@@ -1,13 +1,13 @@
 import {
   SdAccordion
-} from "./chunk.UI7JLJDL.js";
+} from "./chunk.MF5HKQBF.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.H53WQBDK.js";
+} from "./chunk.BSWNMA5L.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -31,12 +31,12 @@ var SdQuickfact = class extends SdAccordion {
       this.expandable && "cursor-pointer select-none"
     )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
       "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
-      this.expandable ? "sd-6-22-0-quickfact--expandable-color-text" : "text-black cursor-default"
+      this.expandable ? "sd-6-22-2-quickfact--expandable-color-text" : "text-black cursor-default"
     )}">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-transform ease-in-out duration-medium text-xl sm:mt-2",
       this.open && "rotate-180",
       !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-22-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-6-22-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-22-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-6-22-0-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-22-2-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-6-22-2-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-22-2-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-6-22-2-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
   }
 };
 SdQuickfact.styles = [
@@ -48,7 +48,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-6-22-0-quickfact")
+  customElement("sd-6-22-2-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [{ height: "0" }, { height: "auto" }],