@solid-design-system/components 6.0.0-next.22 → 6.0.0-next.24

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.0.0-next.22",
+  "version": "6.0.0-next.24",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1602,6 +1602,11 @@
               "description": "The combobox's required attribute.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "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`.",
@@ -1831,6 +1836,11 @@
                 "description": "The combobox's required attribute.",
                 "type": "boolean"
               },
+              {
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
+                "type": "boolean"
+              },
               {
                 "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`.",
@@ -2019,6 +2029,11 @@
               "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Disables the control entirely when true.",
@@ -2162,6 +2177,11 @@
                 "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
                 "type": "string"
               },
+              {
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
+                "type": "boolean"
+              },
               {
                 "name": "disabled",
                 "description": "Disables the control entirely when true.",
@@ -5224,11 +5244,6 @@
               "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
-            {
-              "name": "boldLabel",
-              "description": "Quick way to make the group label bold. Bolding the group label is highly recommended for visual clarity between the label and radio options.\nIt is false by default for consistency among the other form elements which do not use bold labels by default.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "name",
               "description": "The name of the radio group, submitted as a name/value pair with form data.",
@@ -5314,11 +5329,6 @@
                 "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
                 "type": "string"
               },
-              {
-                "name": "boldLabel",
-                "description": "Quick way to make the group label bold. Bolding the group label is highly recommended for visual clarity between the label and radio options.\nIt is false by default for consistency among the other form elements which do not use bold labels by default.",
-                "type": "boolean"
-              },
               {
                 "name": "name",
                 "description": "The name of the radio group, submitted as a name/value pair with form data.",
@@ -5888,6 +5898,11 @@
               "description": "The select's required attribute.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "style-on-valid",
               "description": "Shows success styles if the validity of the input is valid.",
@@ -6079,6 +6094,11 @@
                 "description": "The select's required attribute.",
                 "type": "boolean"
               },
+              {
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
+                "type": "boolean"
+              },
               {
                 "name": "styleOnValid",
                 "description": "Shows success styles if the validity of the input is valid.",
@@ -7276,6 +7296,11 @@
               "description": "Makes the textarea a required field.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "minlength",
               "description": "The minimum length of input that will be considered valid.",
@@ -7444,6 +7469,11 @@
                 "description": "Makes the textarea a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
+                "type": "boolean"
+              },
               {
                 "name": "minlength",
                 "description": "The minimum length of input that will be considered valid.",

package/dist-versioned/chunks/{chunk.ARH5HQTN.js → chunk.2KNNUBKN.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -60,10 +60,10 @@ var SdTeaser = class extends SolidElement {
       "flex",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-0-0-next-22-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-0-0-next-22-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-0-0-next-24-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-0-0-next-24-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-0-0-next-22-teaser--primary-100-color-background"
+        "primary-100": "sd-6-0-0-next-24-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-0-0-next-22-teaser")
+  customElement("sd-6-0-0-next-24-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.RJWK5GMF.js → chunk.2WQCSOBT.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,7 +26,7 @@ SdCarouselItem.styles = [
 :host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-6-0-0-next-22-carousel-item")
+  customElement("sd-6-0-0-next-24-carousel-item")
 ], SdCarouselItem);
 
 export {

package/dist-versioned/chunks/{chunk.RD3IRAC3.js → chunk.32IX6D3L.js}

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

package/dist-versioned/chunks/{chunk.SMJX5NIM.js → chunk.37OK4KWY.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white/75 rounded-full play-pause-transition group-focus-visible:outline-2 group-focus-visible:outline-offset-2"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-6-0-0-next-22-icon id="default-play-icon" library="_internal" name="start"></sd-6-0-0-next-22-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-6-0-0-next-24-icon id="default-play-icon" library="_internal" name="start"></sd-6-0-0-next-24-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,7 +116,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-6-0-0-next-22-video")
+  customElement("sd-6-0-0-next-24-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.IAEZIPFH.js → chunk.4NTO3WSB.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.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-0-0-next-22-header-color-background 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-6-0-0-next-24-header-color-background 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-0-0-next-22-header")
+  customElement("sd-6-0-0-next-24-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.ESO3UE3C.js → chunk.5CGWX5RR.js}

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

package/dist-versioned/chunks/{chunk.RR3Q5MBE.js → chunk.5L5PZI7S.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -135,14 +135,14 @@ var SdAccordion = class extends SolidElement {
   }
   render() {
     return html`<details part="base" class="border-neutral-400"><summary part="header" id="header" class="${cx(
-      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-0-0-next-22-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 sd-6-0-0-next-22-accordion-color-text relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200"
+      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-0-0-next-24-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 sd-6-0-0-next-24-accordion-color-text relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200"
     )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
-      "w-1 sd-6-0-0-next-22-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
+      "w-1 sd-6-0-0-next-24-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-22-icon library="_internal" name="chevron-down"></sd-6-0-0-next-22-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-22-icon library="_internal" name="chevron-down"></sd-6-0-0-next-22-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-24-icon library="_internal" name="chevron-down"></sd-6-0-0-next-24-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-24-icon library="_internal" name="chevron-down"></sd-6-0-0-next-24-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -169,7 +169,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-6-0-0-next-22-accordion")
+  customElement("sd-6-0-0-next-24-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.4QTDQJIH.js → chunk.6VXSQ6EW.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ SdThemeListener.styles = [
 :host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}`
 ];
 SdThemeListener = __decorateClass([
-  customElement("sd-6-0-0-next-22-theme-listener")
+  customElement("sd-6-0-0-next-24-theme-listener")
 ], SdThemeListener);
 
 export {

package/dist-versioned/chunks/{chunk.YF3BJYUM.js → chunk.6XHQXYWH.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-6-0-0-next-22-tab-panel-${this.attrId}`;
+    this.componentId = `sd-6-0-0-next-24-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
   }
@@ -49,7 +49,7 @@ __decorateClass([
   watch("active")
 ], SdTabPanel.prototype, "handleActiveChange", 1);
 SdTabPanel = __decorateClass([
-  customElement("sd-6-0-0-next-22-tab-panel")
+  customElement("sd-6-0-0-next-24-tab-panel")
 ], SdTabPanel);
 
 export {

package/dist-versioned/chunks/{chunk.IAEDCKKK.js → chunk.BPDXM4IA.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
   }
   handleFocus(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-6-0-0-next-22-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-6-0-0-next-24-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-22-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-24-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-6-0-0-next-22-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-6-0-0-next-24-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-22-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-24-button-group__button--hover");
   }
   handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button !== null) {
-        button.classList.add("sd-6-0-0-next-22-button-group__button");
-        button.classList.toggle("sd-6-0-0-next-22-button-group__button--first", index === 0);
-        button.classList.toggle("sd-6-0-0-next-22-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-6-0-0-next-22-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-6-0-0-next-22-button-group__button--radio", button.tagName.toLowerCase() === "sd-6-0-0-next-22-radio-button");
+        button.classList.add("sd-6-0-0-next-24-button-group__button");
+        button.classList.toggle("sd-6-0-0-next-24-button-group__button--first", index === 0);
+        button.classList.toggle("sd-6-0-0-next-24-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-6-0-0-next-24-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-6-0-0-next-24-button-group__button--radio", button.tagName.toLowerCase() === "sd-6-0-0-next-24-radio-button");
       }
     });
   }
@@ -64,11 +64,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-6-0-0-next-22-button-group")
+  customElement("sd-6-0-0-next-24-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-6-0-0-next-22-button, sd-6-0-0-next-22-radio-button";
+  const selector = "sd-6-0-0-next-24-button, sd-6-0-0-next-24-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.ONQR2THN.js → chunk.CNEVB3DU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.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`<label part="base" class="${cx(
-      "sd-6-0-0-next-22-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-6-0-0-next-24-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-0-0-next-22-checkbox-border-width rounded-sm h-4 w-4",
+      "relative flex flex-shrink-0 items-center justify-center border sd-6-0-0-next-24-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",
       {
@@ -160,7 +160,7 @@ 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-0-0-next-22-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-0-0-next-22-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-0-0-next-22-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-0-0-next-22-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-6-0-0-next-24-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-0-0-next-24-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-0-0-next-24-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-0-0-next-24-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -223,7 +223,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-6-0-0-next-22-checkbox")
+  customElement("sd-6-0-0-next-24-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.6VZW3ADW.js → chunk.DDFLKY5G.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -88,7 +88,7 @@ var SdStep = class extends SolidElement {
       this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
     );
     const circleButtonClasses = cx(
-      "border sd-6-0-0-next-22-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      "border sd-6-0-0-next-24-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" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
       this.disabled && "border-neutral-500 text-neutral-500",
@@ -105,7 +105,7 @@ var SdStep = class extends SolidElement {
       "text-lg",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
       this.notInteractive && "text-primary"
-    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-0-0-next-22-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-0-0-next-22-icon>` : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
+    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-0-0-next-24-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-0-0-next-24-icon>` : 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"
@@ -145,7 +145,7 @@ var SdStep = class extends SolidElement {
 SdStep.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.17 | 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])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-0-0-next-22-icon,slot[name=circle-content]::slotted(sd-6-0-0-next-22-icon){color:rgba(var(--sd-color-icon-fill-primary))}: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])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-0-0-next-24-icon,slot[name=circle-content]::slotted(sd-6-0-0-next-24-icon){color:rgba(var(--sd-color-icon-fill-primary))}: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 })
@@ -196,7 +196,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-6-0-0-next-22-step")
+  customElement("sd-6-0-0-next-24-step")
 ], SdStep);
 
 export {