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

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": "6.29.0",
+  "version": "7.0.0-next.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -577,7 +577,7 @@
               "name": "variant",
               "description": "The brandshape's theme variant.",
               "value": {
-                "type": "'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'primary|80' | 'white|80' | 'image'",
+                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'primary|80'\n    | 'white|80'\n    | 'image'",
                 "default": "'primary'"
               }
             },
@@ -613,7 +613,7 @@
               {
                 "name": "variant",
                 "description": "The brandshape's theme variant.",
-                "type": "'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'primary|80' | 'white|80' | 'image'"
+                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'primary|80'\n    | 'white|80'\n    | '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' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'",
+                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | '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' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+                "type": "| 'none'\n    | 'text'\n    | 'decimal'\n    | 'numeric'\n    | 'tel'\n    | 'search'\n    | 'email'\n    | 'url'"
               }
             },
             {
@@ -3485,7 +3485,7 @@
               "name": "autocapitalize",
               "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
               }
             },
             { "name": "autocorrect", "value": { "type": "'off' | 'on'" } },
@@ -3503,7 +3503,7 @@
               "name": "enterkeyhint",
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
               }
             },
             {
@@ -3593,7 +3593,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' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'"
+                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
               },
               {
                 "name": "size",
@@ -3603,7 +3603,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' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+                "type": "| 'none'\n    | 'text'\n    | 'decimal'\n    | 'numeric'\n    | 'tel'\n    | 'search'\n    | 'email'\n    | 'url'"
               },
               {
                 "name": "value",
@@ -3723,7 +3723,7 @@
               {
                 "name": "autocapitalize",
                 "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
               },
               { "name": "autocorrect", "type": "'off' | 'on'" },
               {
@@ -3739,7 +3739,7 @@
               {
                 "name": "enterkeyhint",
                 "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
               },
               {
                 "name": "styleOnValid",
@@ -4783,7 +4783,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' | 'end' | 'center' | 'anchor'",
+                "type": "| 'start'\n    | 'end'\n    | 'center'\n    | 'anchor'",
                 "default": "'anchor'"
               }
             },
@@ -4923,7 +4923,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' | 'end' | 'center' | 'anchor'"
+                "type": "| 'start'\n    | 'end'\n    | 'center'\n    | 'anchor'"
               },
               {
                 "name": "arrowPadding",
@@ -5658,7 +5658,7 @@
               "name": "tooltip",
               "description": "Defines the thumbs tooltip behaviour.",
               "value": {
-                "type": "'on-interaction' | 'hidden' | 'always-visible'",
+                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'",
                 "default": "'on-interaction'"
               }
             },
@@ -5772,7 +5772,7 @@
               {
                 "name": "tooltip",
                 "description": "Defines the thumbs tooltip behaviour.",
-                "type": "'on-interaction' | 'hidden' | 'always-visible'"
+                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
               },
               {
                 "name": "defaultValue",
@@ -7322,7 +7322,7 @@
               "name": "variant",
               "description": "Variant of the teaser",
               "value": {
-                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'",
+                "type": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'",
                 "default": "'white'"
               }
             },
@@ -7364,7 +7364,7 @@
               {
                 "name": "variant",
                 "description": "Variant of the teaser",
-                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
+                "type": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
               },
               {
                 "name": "breakpoint",
@@ -7404,7 +7404,7 @@
               "name": "variant",
               "description": "Variant of the teaser",
               "value": {
-                "type": "'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
+                "type": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'",
                 "default": "'white'"
               }
             },
@@ -7440,7 +7440,7 @@
               {
                 "name": "variant",
                 "description": "Variant of the teaser",
-                "type": "'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
+                "type": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
               },
               {
                 "name": "open",
@@ -7550,7 +7550,7 @@
               "name": "autocapitalize",
               "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
               }
             },
             {
@@ -7572,7 +7572,7 @@
               "name": "enterkeyhint",
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
               }
             },
             {
@@ -7722,7 +7722,7 @@
               {
                 "name": "autocapitalize",
                 "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
               },
               {
                 "name": "autocorrect",
@@ -7742,7 +7742,7 @@
               {
                 "name": "enterkeyhint",
                 "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
               },
               {
                 "name": "styleOnValid",
@@ -7869,7 +7869,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' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'",
                 "default": "'top'"
               }
             },
@@ -7958,7 +7958,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' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'"
               },
               {
                 "name": "disabled",

package/dist-versioned/chunks/{chunk.DEKB47SU.js → chunk.4ICMHKGL.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.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-29-0-tab-${this.attrId}`;
+    this.componentId = `sd-7-0-0-next-2-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-6-29-0-tab--hover-color-background",
-      this.active && "z-20 sd-6-29-0-tab--active-color-text"
+      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"
     )}" 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-6-29-0-tab--disabled-color-text" : this.active ? "sd-6-29-0-tab--active-color-text" : "sd-6-29-0-tab-color-text"
+      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"
     )}"></slot><slot class="${cx(
-      this.disabled || this.visuallyDisabled ? "sd-6-29-0-tab--disabled-color-text" : this.active ? "sd-6-29-0-tab--active-color-text" : "sd-6-29-0-tab-color-text"
+      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"
     )}"></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-29-0-tab-color-border"
+      !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"
     )}"></div></div></div>`;
   }
 };
@@ -109,7 +109,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-6-29-0-tab")
+  customElement("sd-7-0-0-next-2-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.SRHXZUZH.js → chunk.4KQSESLL.js}

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

package/dist-versioned/chunks/{chunk.EVXE6QT5.js → chunk.4MPXU2RU.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.js";
 import {
   __decorateClass,
   __spreadValues
@@ -418,14 +418,14 @@ var SdInput = class extends SolidElement {
       !isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? textSize : "text-xs",
       (this.visuallyDisabled || this.disabled) && "text-neutral-500",
       isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
-    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-29-0-icon class="${cx(
+    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-2-icon class="${cx(
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
       iconSize
-    )}" library="_internal" name="closing-round"></sd-6-29-0-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
+    )}" library="_internal" name="closing-round"></sd-7-0-0-next-2-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
       "flex items-center sd-interactive",
       iconMarginLeft,
       this.floatingLabel && !isFloatingLabelActive && "hide-password-toggle"
-    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-29-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-6-29-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-6-29-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-6-29-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-6-29-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-29-0-icon>` : ""} ${this.type === "time" ? html`<sd-6-29-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-6-29-0-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-6-29-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-29-0-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-29-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-29-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-29-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-29-0-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-6-29-0-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-29-0-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-6-29-0-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-29-0-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-0-0-next-2-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-7-0-0-next-2-icon></slot>` : html`<slot name="hide-password-icon"><sd-7-0-0-next-2-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-7-0-0-next-2-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-7-0-0-next-2-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-7-0-0-next-2-icon>` : ""} ${this.type === "time" ? html`<sd-7-0-0-next-2-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-7-0-0-next-2-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-7-0-0-next-2-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-2-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-2-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-7-0-0-next-2-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-7-0-0-next-2-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-2-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-7-0-0-next-2-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-2-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-7-0-0-next-2-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-2-icon></slot></button></div>` : ""}</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"
@@ -438,7 +438,7 @@ var SdInput = class extends SolidElement {
 SdInput.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-29-0-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
+:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-7-0-0-next-2-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
 ];
 __decorateClass([
   query("#input")
@@ -577,7 +577,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdInput.prototype, "handleSizeChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-6-29-0-input")
+  customElement("sd-7-0-0-next-2-input")
 ], SdInput);
 
 export {

package/dist-versioned/chunks/{chunk.6A5KL2ME.js → chunk.4UWPPYNK.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.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-29-0-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-2-step");
   }
   /**
    * Sets the active step.
@@ -137,7 +137,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-6-29-0-step-group")
+  customElement("sd-7-0-0-next-2-step-group")
 ], SdStepGroup);
 
 export {

package/dist-versioned/chunks/{chunk.NZOLXA5P.js → chunk.64V7RPJM.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-6-29-0-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-7-0-0-next-2-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-6-29-0-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-7-0-0-next-2-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-6-29-0-divider id="divider" class="pt-2 pb-4" part="divider"></sd-6-29-0-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-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>`;
   }
 };
 SdOptgroup.styles = [
@@ -59,7 +59,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-6-29-0-optgroup")
+  customElement("sd-7-0-0-next-2-optgroup")
 ], SdOptgroup);
 
 export {

package/dist-versioned/chunks/{chunk.GGTNOUL3.js → chunk.BGHQYSC6.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,7 +54,7 @@ var SdHeader = class extends SolidElement {
     }
   }
   render() {
-    return html`<header class="w-full sd-6-29-0-header-color-background sd-6-29-0-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-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>`;
   }
 };
 SdHeader.styles = [
@@ -72,7 +72,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-6-29-0-header")
+  customElement("sd-7-0-0-next-2-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-6-29-0-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-7-0-0-next-2-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-6-29-0-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-7-0-0-next-2-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;

package/dist-versioned/chunks/{chunk.AQ2YHTJT.js → chunk.CBXPY7RV.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
     this.helpText = "";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-6-29-0-checkbox")];
+    return [...this.querySelectorAll("sd-7-0-0-next-2-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
     );
   }
   syncCheckboxes() {
-    if (customElements.get("sd-6-29-0-checkbox")) {
+    if (customElements.get("sd-7-0-0-next-2-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-6-29-0-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-7-0-0-next-2-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-6-29-0-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-29-0-checkbox:last-of-type){margin-bottom:0}:host([orientation=horizontal]) ::slotted(sd-6-29-0-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-29-0-checkbox:last-of-type){margin-right:0}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-29-0-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-29-0-checkbox:last-of-type){margin-right:0}`
+: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}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -101,7 +101,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-6-29-0-checkbox-group")
+  customElement("sd-7-0-0-next-2-checkbox-group")
 ], SdCheckboxGroup);
 
 export {

package/dist-versioned/chunks/{chunk.TD274Z54.js → chunk.CEEZZN7A.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T73O2TL3.js";
+} from "./chunk.O6I23JYG.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-29-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-29-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-29-0-icon></sd-6-29-0-button></div></header>` : html`<sd-6-29-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-29-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-29-0-icon></sd-6-29-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-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>`;
   }
 };
 SdDrawer.styles = [
@@ -250,7 +250,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-6-29-0-drawer")
+  customElement("sd-7-0-0-next-2-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [