@solid-design-system/components 7.0.0-next.2 → 7.0.0-next.3

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "7.0.0-next.2",
+  "version": "7.0.0-next.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -577,7 +577,7 @@
               "name": "variant",
               "description": "The brandshape's theme variant.",
               "value": {
-                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'primary|80'\n    | 'white|80'\n    | 'image'",
+                "type": "'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'primary|80' | 'white|80' | 'image'",
                 "default": "'primary'"
               }
             },
@@ -613,7 +613,7 @@
               {
                 "name": "variant",
                 "description": "The brandshape's theme variant.",
-                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'primary|80'\n    | 'white|80'\n    | 'image'"
+                "type": "'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'primary|80' | 'white|80' | 'image'"
               },
               {
                 "name": "shapes",
@@ -3355,7 +3355,7 @@
               "name": "type",
               "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
               "value": {
-                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'",
+                "type": "'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'",
                 "default": "'text'"
               }
             },
@@ -3368,7 +3368,7 @@
               "name": "inputmode",
               "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
               "value": {
-                "type": "| 'none'\n    | 'text'\n    | 'decimal'\n    | 'numeric'\n    | 'tel'\n    | 'search'\n    | 'email'\n    | 'url'"
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
               }
             },
             {
@@ -3485,10 +3485,14 @@
               "name": "autocapitalize",
               "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               }
             },
-            { "name": "autocorrect", "value": { "type": "'off' | 'on'" } },
+            {
+              "name": "autocorrect",
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "value": { "type": "boolean" }
+            },
             {
               "name": "autocomplete",
               "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
@@ -3503,7 +3507,7 @@
               "name": "enterkeyhint",
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               }
             },
             {
@@ -3593,7 +3597,7 @@
               {
                 "name": "type",
                 "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
+                "type": "'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'"
               },
               {
                 "name": "size",
@@ -3603,7 +3607,7 @@
               {
                 "name": "inputmode",
                 "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
-                "type": "| 'none'\n    | 'text'\n    | 'decimal'\n    | 'numeric'\n    | 'tel'\n    | 'search'\n    | 'email'\n    | 'url'"
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
               },
               {
                 "name": "value",
@@ -3723,9 +3727,13 @@
               {
                 "name": "autocapitalize",
                 "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              },
+              {
+                "name": "autocorrect",
+                "description": "Indicates whether the browser's autocorrect feature is on or off.",
+                "type": "boolean"
               },
-              { "name": "autocorrect", "type": "'off' | 'on'" },
               {
                 "name": "autocomplete",
                 "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
@@ -3739,7 +3747,7 @@
               {
                 "name": "enterkeyhint",
                 "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               },
               {
                 "name": "styleOnValid",
@@ -4783,7 +4791,7 @@
               "name": "arrow-placement",
               "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
               "value": {
-                "type": "| 'start'\n    | 'end'\n    | 'center'\n    | 'anchor'",
+                "type": "'start' | 'end' | 'center' | 'anchor'",
                 "default": "'anchor'"
               }
             },
@@ -4923,7 +4931,7 @@
               {
                 "name": "arrowPlacement",
                 "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-                "type": "| 'start'\n    | 'end'\n    | 'center'\n    | 'anchor'"
+                "type": "'start' | 'end' | 'center' | 'anchor'"
               },
               {
                 "name": "arrowPadding",
@@ -5658,7 +5666,7 @@
               "name": "tooltip",
               "description": "Defines the thumbs tooltip behaviour.",
               "value": {
-                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'",
+                "type": "'on-interaction' | 'hidden' | 'always-visible'",
                 "default": "'on-interaction'"
               }
             },
@@ -5772,7 +5780,7 @@
               {
                 "name": "tooltip",
                 "description": "Defines the thumbs tooltip behaviour.",
-                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "type": "'on-interaction' | 'hidden' | 'always-visible'"
               },
               {
                 "name": "defaultValue",
@@ -7322,7 +7330,7 @@
               "name": "variant",
               "description": "Variant of the teaser",
               "value": {
-                "type": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'",
+                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'",
                 "default": "'white'"
               }
             },
@@ -7364,7 +7372,7 @@
               {
                 "name": "variant",
                 "description": "Variant of the teaser",
-                "type": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
+                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
               },
               {
                 "name": "breakpoint",
@@ -7404,7 +7412,7 @@
               "name": "variant",
               "description": "Variant of the teaser",
               "value": {
-                "type": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'",
+                "type": "'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
                 "default": "'white'"
               }
             },
@@ -7440,7 +7448,7 @@
               {
                 "name": "variant",
                 "description": "Variant of the teaser",
-                "type": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
+                "type": "'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
               },
               {
                 "name": "open",
@@ -7550,13 +7558,13 @@
               "name": "autocapitalize",
               "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               }
             },
             {
               "name": "autocorrect",
               "description": "Indicates whether the browser's autocorrect feature is on or off.",
-              "value": { "type": "'off' | 'on'" }
+              "value": { "type": "boolean" }
             },
             {
               "name": "autocomplete",
@@ -7572,7 +7580,7 @@
               "name": "enterkeyhint",
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               }
             },
             {
@@ -7722,12 +7730,12 @@
               {
                 "name": "autocapitalize",
                 "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               },
               {
                 "name": "autocorrect",
                 "description": "Indicates whether the browser's autocorrect feature is on or off.",
-                "type": "'off' | 'on'"
+                "type": "boolean"
               },
               {
                 "name": "autocomplete",
@@ -7742,7 +7750,7 @@
               {
                 "name": "enterkeyhint",
                 "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               },
               {
                 "name": "styleOnValid",
@@ -7869,7 +7877,7 @@
               "name": "placement",
               "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
               "value": {
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'",
+                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",
                 "default": "'top'"
               }
             },
@@ -7958,7 +7966,7 @@
               {
                 "name": "placement",
                 "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'"
+                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
               },
               {
                 "name": "disabled",

package/dist-versioned/chunks/{chunk.QIIQFT2B.js → chunk.332BBYHT.js}

@@ -228,7 +228,7 @@ var SdTextarea = class extends SolidElement {
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
       ["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-7-0-0-next-2-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-0-next-3-icon]:pe-8",
       {
         sm: isFloatingLabelActive ? "pb-1" : "py-2",
         md: isFloatingLabelActive ? "pb-1" : "py-2",
@@ -236,7 +236,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-7-0-0-next-2-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-2-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-2-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-2-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" 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 === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?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-7-0-0-next-3-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-3-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-3-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-3-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -318,7 +318,15 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdTextarea.prototype, "autocapitalize", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: Boolean,
+    reflect: true,
+    converter: {
+      // Allow "on|off" attribute values but keep the property boolean
+      fromAttribute: (value) => value !== "off",
+      toAttribute: (value) => value ? "on" : "off"
+    }
+  })
 ], SdTextarea.prototype, "autocorrect", 2);
 __decorateClass([
   property({ reflect: true })
@@ -361,7 +369,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-7-0-0-next-2-textarea")
+  customElement("sd-7-0-0-next-3-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/chunk.4ICMHKGL.js

@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-7-0-0-next-2-tab-${this.attrId}`;
+    this.componentId = `sd-7-0-0-next-3-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -62,17 +62,17 @@ var SdTab = class extends SolidElement {
       "outline-hidden focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
       this.variant === "container" ? "tab-container-border bg-white rounded-[4px_4px_0_0]" : "navigable-border-radius",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
-      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-7-0-0-next-2-tab--hover-color-background",
-      this.active && "z-20 sd-7-0-0-next-2-tab--active-color-text"
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-7-0-0-next-3-tab--hover-color-background",
+      this.active && "z-20 sd-7-0-0-next-3-tab--active-color-text"
     )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx("flex h-full items-center justify-center whitespace-nowrap")}"><slot name="left" class="${cx(
       slots.left && "block pr-2",
-      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-2-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-2-tab--active-color-text" : "sd-7-0-0-next-2-tab-color-text"
+      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-3-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-3-tab--active-color-text" : "sd-7-0-0-next-3-tab-color-text"
     )}"></slot><slot class="${cx(
-      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-2-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-2-tab--active-color-text" : "sd-7-0-0-next-2-tab-color-text"
+      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-3-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-3-tab--active-color-text" : "sd-7-0-0-next-3-tab-color-text"
     )}"></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-7-0-0-next-2-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-7-0-0-next-3-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -109,7 +109,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-7-0-0-next-2-tab")
+  customElement("sd-7-0-0-next-3-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/chunk.4KQSESLL.js

@@ -211,22 +211,22 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-7-0-0-next-2-icon name="${{
+    )}"><sd-7-0-0-next-3-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-7-0-0-next-2-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-7-0-0-next-3-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-7-0-0-next-2-notification-color-border",
+      "border-solid border-[1px] border-l-0 sd-7-0-0-next-3-notification-color-border",
       {
-        info: "sd-7-0-0-next-2-notification--info-color-background",
-        success: "sd-7-0-0-next-2-notification--success-color-background",
-        warning: "sd-7-0-0-next-2-notification--warning-color-background",
-        error: "sd-7-0-0-next-2-notification--error-color-background"
+        info: "sd-7-0-0-next-3-notification--info-color-background",
+        success: "sd-7-0-0-next-3-notification--success-color-background",
+        warning: "sd-7-0-0-next-3-notification--warning-color-background",
+        error: "sd-7-0-0-next-3-notification--error-color-background"
       }[this.variant]
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-7-0-0-next-2-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-7-0-0-next-2-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-7-0-0-next-2-icon></sd-7-0-0-next-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-7-0-0-next-2-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-7-0-0-next-3-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-7-0-0-next-3-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-7-0-0-next-3-icon></sd-7-0-0-next-3-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-7-0-0-next-3-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-7-0-0-next-2-notification")
+  customElement("sd-7-0-0-next-3-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/chunk.4UWPPYNK.js

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

package/dist-versioned/chunks/chunk.64V7RPJM.js

@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-7-0-0-next-2-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-7-0-0-next-3-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-7-0-0-next-2-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-7-0-0-next-3-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -38,7 +38,7 @@ var SdOptgroup = class extends SolidElement {
   }
   render() {
     const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-7-0-0-next-2-divider id="divider" class="pt-2 pb-4" part="divider"></sd-7-0-0-next-2-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-7-0-0-next-3-divider id="divider" class="pt-2 pb-4" part="divider"></sd-7-0-0-next-3-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
   }
 };
 SdOptgroup.styles = [
@@ -59,7 +59,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-7-0-0-next-2-optgroup")
+  customElement("sd-7-0-0-next-3-optgroup")
 ], SdOptgroup);
 
 export {

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

@@ -54,7 +54,7 @@ var SdHeader = class extends SolidElement {
     }
   }
   render() {
-    return html`<header class="w-full sd-7-0-0-next-2-header-color-background sd-7-0-0-next-2-header-padding-bottom relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
+    return html`<header class="w-full sd-7-0-0-next-3-header-color-background sd-7-0-0-next-3-header-padding-bottom relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
   }
 };
 SdHeader.styles = [
@@ -72,7 +72,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-7-0-0-next-2-header")
+  customElement("sd-7-0-0-next-3-header")
 ], SdHeader);
 
 export {

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

@@ -15,7 +15,7 @@ var FormControlController = class {
       const disabled = this.options.disabled(this.host);
       const name = this.options.name(this.host);
       const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-7-0-0-next-2-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-7-0-0-next-3-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -40,7 +40,7 @@ var FormControlController = class {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-7-0-0-next-2-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-7-0-0-next-3-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;

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

@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
     this.helpText = "";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-7-0-0-next-2-checkbox")];
+    return [...this.querySelectorAll("sd-7-0-0-next-3-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
     );
   }
   syncCheckboxes() {
-    if (customElements.get("sd-7-0-0-next-2-checkbox")) {
+    if (customElements.get("sd-7-0-0-next-3-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-7-0-0-next-2-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-7-0-0-next-3-checkbox").then(() => this.syncCheckboxes());
     }
   }
   handleSizeChange() {
@@ -80,7 +80,7 @@ var SdCheckboxGroup = class extends SolidElement {
 SdCheckboxGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-2-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-2-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-2-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-2-checkbox:last-of-type){margin-right:0}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-2-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-2-checkbox:last-of-type){margin-right:0}`
+:host{display:block}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-3-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-7-0-0-next-3-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-3-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-7-0-0-next-3-checkbox:last-of-type){margin-right:0}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-3-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-7-0-0-next-3-checkbox:last-of-type){margin-right:0}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -101,7 +101,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-7-0-0-next-2-checkbox-group")
+  customElement("sd-7-0-0-next-3-checkbox-group")
 ], SdCheckboxGroup);
 
 export {

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

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