npm - @solid-design-system/components - Versions diffs - 7.0.0-next.2 → 7.0.0-next.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (289) hide show

package/dist-versioned/chunks/chunk.QGERTGJH.js CHANGED Viewed

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-7-0-0-next-2-popup");
+    const popup = document.createElement("sd-7-0-0-next-3-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -23,7 +23,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.sync = "width";
     }
     const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-sd-7-0-0-next-2-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius);border-bottom-left-radius:var(--sd-radius);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary));background-color:rgba(var(--sd-color-background-white));padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-7-0-0-next-2-popup li{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms))}sd-7-0-0-next-2-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100))}sd-7-0-0-next-2-popup li{list-style-type:''}sd-7-0-0-next-2-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}sd-7-0-0-next-2-popup li:not(:has(sd-7-0-0-next-2-option)){cursor:pointer;padding-inline:var(--sd-spacing-4);padding-block:var(--sd-spacing-3);font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black))}sd-7-0-0-next-2-popup li:not(:has(sd-7-0-0-next-2-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200))}sd-7-0-0-next-2-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}`;
+sd-7-0-0-next-3-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius);border-bottom-left-radius:var(--sd-radius);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary));background-color:rgba(var(--sd-color-background-white));padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-7-0-0-next-3-popup li{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms))}sd-7-0-0-next-3-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100))}sd-7-0-0-next-3-popup li{list-style-type:''}sd-7-0-0-next-3-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}sd-7-0-0-next-3-popup li:not(:has(sd-7-0-0-next-3-option)){cursor:pointer;padding-inline:var(--sd-spacing-4);padding-block:var(--sd-spacing-3);font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black))}sd-7-0-0-next-3-popup li:not(:has(sd-7-0-0-next-3-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200))}sd-7-0-0-next-3-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -36,13 +36,13 @@ sd-7-0-0-next-2-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overfl
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-0-0-next-2-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-0-0-next-3-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-0-0-next-2-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-0-0-next-3-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });

package/dist-versioned/chunks/chunk.QUNBU6CO.js CHANGED Viewed

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

package/dist-versioned/chunks/chunk.RH3RR3MN.js CHANGED Viewed

@@ -55,19 +55,19 @@ var SdProgressBar = class extends SolidElement {
       this.isLoading ? this.localize.term("loading") : this.valueFormatter(this.clampedValue)
     )}" aria-label="${ifDefined(!hasLabel ? this.label || this.localize.term("progress") : void 0)}" aria-labelledby="${ifDefined(hasLabel ? "label" : this.label)}" style="${`--percentage: ${this.percentage}%;`}">${this.isLoading ? html`<div part="track" class="${cx(
       "absolute top-0 left-0 h-full progress-bar__track--loading-left",
-      this.inverted ? "sd-7-0-0-next-2-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-2-progress-bar__slide-bar-color-background"
+      this.inverted ? "sd-7-0-0-next-3-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-3-progress-bar__slide-bar-color-background"
     )}"></div><div part="track" class="${cx(
       "absolute top-0 right-0 h-full progress-bar__track--loading-right",
-      this.inverted ? "sd-7-0-0-next-2-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-2-progress-bar__slide-bar-color-background"
+      this.inverted ? "sd-7-0-0-next-3-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-3-progress-bar__slide-bar-color-background"
     )}"></div><div part="indicator" class="${cx(
       "absolute top-0 h-full progress-bar__indicator--loading",
-      this.inverted ? "sd-7-0-0-next-2-progress-bar--active--inverted-color-background" : "bg-accent"
+      this.inverted ? "sd-7-0-0-next-3-progress-bar--active--inverted-color-background" : "bg-accent"
     )}"></div>` : html`<div part="indicator" class="${cx(
       "w-[var(--percentage)]",
-      this.inverted ? "sd-7-0-0-next-2-progress-bar--active--inverted-color-background" : "bg-accent"
+      this.inverted ? "sd-7-0-0-next-3-progress-bar--active--inverted-color-background" : "bg-accent"
     )}"></div>${this.value && this.value > 0 && this.value < this.safeMax ? html`<div class="w-0.5 shrink-0"></div>` : nothing}<div part="track" class="${cx(
       "flex-1",
-      this.inverted ? "sd-7-0-0-next-2-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-2-progress-bar__slide-bar-color-background"
+      this.inverted ? "sd-7-0-0-next-3-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-3-progress-bar__slide-bar-color-background"
     )}"></div>`}</div>${this.showValue ? html`<span class="${cx(
       "text-neutral-700 text-xs w-shrink-0",
       this.inverted ? "text-white" : "text-neutral-700",
@@ -103,7 +103,7 @@ __decorateClass([
   property({ attribute: false })
 ], SdProgressBar.prototype, "valueFormatter", 2);
 SdProgressBar = __decorateClass([
-  customElement("sd-7-0-0-next-2-progress-bar")
+  customElement("sd-7-0-0-next-3-progress-bar")
 ], SdProgressBar);
 export {

package/dist-versioned/chunks/chunk.ROTKRIJL.js CHANGED Viewed

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

package/dist-versioned/chunks/chunk.TACTLKX6.js CHANGED Viewed

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

package/dist-versioned/chunks/chunk.TF2CAVQI.js CHANGED Viewed

@@ -159,62 +159,62 @@ var SdButton = class extends SolidElement {
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
       {
         /* sizes, fonts */
-        sm: `varspacing-8 min-h-8 sd-7-0-0-next-2-button--size-sm-font-size sd-7-0-0-next-2-button-font-weight sd-7-0-0-next-2-button--secondary--size-sm-padding-block sd-7-0-0-next-2-button--size-sm-border-radius`,
-        md: `varspacing-10 sd-7-0-0-next-2-button--size-md-height sd-7-0-0-next-2-button--size-md-font-size sd-7-0-0-next-2-button--secondary--size-md-padding-block sd-7-0-0-next-2-button-font-weight sd-7-0-0-next-2-button--size-md-border-radius`,
-        lg: `varspacing-12 sd-7-0-0-next-2-button--size-lg-height sd-7-0-0-next-2-button--size-lg-font-size sd-7-0-0-next-2-button--secondary--size-lg-padding-block sd-7-0-0-next-2-button-font-weight sd-7-0-0-next-2-button--size-lg-border-radius`
+        sm: `varspacing-8 min-h-8 sd-7-0-0-next-3-button--size-sm-font-size sd-7-0-0-next-3-button-font-weight sd-7-0-0-next-3-button--secondary--size-sm-padding-block sd-7-0-0-next-3-button--size-sm-border-radius`,
+        md: `varspacing-10 sd-7-0-0-next-3-button--size-md-height sd-7-0-0-next-3-button--size-md-font-size sd-7-0-0-next-3-button--secondary--size-md-padding-block sd-7-0-0-next-3-button-font-weight sd-7-0-0-next-3-button--size-md-border-radius`,
+        lg: `varspacing-12 sd-7-0-0-next-3-button--size-lg-height sd-7-0-0-next-3-button--size-lg-font-size sd-7-0-0-next-3-button--secondary--size-lg-padding-block sd-7-0-0-next-3-button-font-weight sd-7-0-0-next-3-button--size-lg-border-radius`
       }[this.size],
       !slots["icon-only"] && {
         /* sizes, fonts */
-        sm: `${hasBorder ? "sd-7-0-0-next-2-button--secondary-padding-inline" : "sd-7-0-0-next-2-button--size-sm-padding-block sd-7-0-0-next-2-button-padding-inline"}`,
-        md: `${hasBorder ? "sd-7-0-0-next-2-button--secondary-padding-inline" : "sd-7-0-0-next-2-button--size-md-padding-block sd-7-0-0-next-2-button-padding-inline"}`,
-        lg: `${hasBorder ? "sd-7-0-0-next-2-button--secondary-padding-inline" : "sd-7-0-0-next-2-button--size-lg-padding-block sd-7-0-0-next-2-button-padding-inline"}`
+        sm: `${hasBorder ? "sd-7-0-0-next-3-button--secondary-padding-inline" : "sd-7-0-0-next-3-button--size-sm-padding-block sd-7-0-0-next-3-button-padding-inline"}`,
+        md: `${hasBorder ? "sd-7-0-0-next-3-button--secondary-padding-inline" : "sd-7-0-0-next-3-button--size-md-padding-block sd-7-0-0-next-3-button-padding-inline"}`,
+        lg: `${hasBorder ? "sd-7-0-0-next-3-button--secondary-padding-inline" : "sd-7-0-0-next-3-button--size-lg-padding-block sd-7-0-0-next-3-button-padding-inline"}`
       }[this.size],
       /**
        * Anatomy
        * */
       slots["icon-only"] && {
         sm: "px-1 aspect-square",
-        md: "sd-7-0-0-next-2-button--size-md--icon-only-padding-inline aspect-square",
+        md: "sd-7-0-0-next-3-button--size-md--icon-only-padding-inline aspect-square",
         lg: "px-[12px] aspect-square"
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-7-0-0-next-2-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-7-0-0-next-2-button--primary--default-color-background border-transparent sd-7-0-0-next-2-button--primary--default-color-text hover:sd-7-0-0-next-2-button--primary--hover-color-text active:sd-7-0-0-next-2-button--primary--active-color-text active:sd-7-0-0-next-2-button--primary--active-color-background"}
-          disabled:sd-7-0-0-next-2-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-7-0-0-next-2-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-7-0-0-next-2-button--primary--inverted--default-color-text sd-7-0-0-next-2-button--primary--inverted--default-color-background border-white hover:sd-7-0-0-next-2-button--primary--inverted--hover-color-text active:sd-7-0-0-next-2-button--primary--inverted--active-color-text active:sd-7-0-0-next-2-button--primary--inverted--active-color-background"}
-          disabled:sd-7-0-0-next-2-button--inverted--disabled-color-background disabled:text-white`,
-        secondary: !this.inverted ? `border sd-7-0-0-next-2-button-border-width ${this.visuallyDisabled ? "sd-7-0-0-next-2-button--secondary--disabled-color-text sd-7-0-0-next-2-button--secondary--disabled-color-border" : "sd-7-0-0-next-2-button--secondary--default-color-text sd-7-0-0-next-2-button--secondary--default-color-border hover:sd-7-0-0-next-2-button--secondary--hover-color-text hover:sd-7-0-0-next-2-button--secondary--hover-color-border active:sd-7-0-0-next-2-button--secondary--active-color-text active:sd-7-0-0-next-2-button--secondary--active-color-border"}
-          disabled:sd-7-0-0-next-2-button--secondary--disabled-color-text disabled:sd-7-0-0-next-2-button--secondary--disabled-color-border` : `border sd-7-0-0-next-2-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-7-0-0-next-2-button--secondary--inverted-color-text sd-7-0-0-next-2-button--secondary--inverted-color-border hover:sd-7-0-0-next-2-button--secondary--inverted-color-border hover:sd-7-0-0-next-2-button--secondary--inverted--hover-color-text hover:sd-7-0-0-next-2-button--secondary--inverted--hover-color-background active:sd-7-0-0-next-2-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-7-0-0-next-2-button--secondary--inverted--active-color-background"}
-          disabled:sd-7-0-0-next-2-button--inverted--disabled-color-border disabled:sd-7-0-0-next-2-button--inverted--disabled-color-text`,
-        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-7-0-0-next-2-button--tertiary--disabled-color-text" : "sd-7-0-0-next-2-button--tertiary--default-color-text hover:sd-7-0-0-next-2-button--tertiary--hover-color-text active:sd-7-0-0-next-2-button--tertiary--active-color-text"}
-          disabled:sd-7-0-0-next-2-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-7-0-0-next-2-button--tertiary--inverted-color-text hover:sd-7-0-0-next-2-button--tertiary--inverted--hover-color-text hover:sd-7-0-0-next-2-button--tertiary--inverted--hover-color-background active:sd-7-0-0-next-2-button--tertiary--inverted--active-color-background active:sd-7-0-0-next-2-button--tertiary--inverted--active-color-text"}
-          disabled:sd-7-0-0-next-2-button--inverted--disabled-color-text`,
-        cta: `${this.visuallyDisabled ? "sd-7-0-0-next-2-button--primary--disabled-color-background border-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
-          ${!this.inverted ? "text-white bg-accent disabled:sd-7-0-0-next-2-button--primary--disabled-color-background hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-7-0-0-next-2-button--cta--inverted--default-color-background sd-7-0-0-next-2-button--cta--inverted--default-color-text hover:sd-7-0-0-next-2-button--cta--inverted--hover-color-text active:sd-7-0-0-next-2-button--cta--inverted--active-color-text disabled:sd-7-0-0-next-2-button--inverted--disabled-color-background disabled:text-white"}`
+        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-7-0-0-next-3-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-7-0-0-next-3-button--primary--default-color-background border-transparent sd-7-0-0-next-3-button--primary--default-color-text hover:sd-7-0-0-next-3-button--primary--hover-color-text active:sd-7-0-0-next-3-button--primary--active-color-text active:sd-7-0-0-next-3-button--primary--active-color-background"}
+          disabled:sd-7-0-0-next-3-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-7-0-0-next-3-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-7-0-0-next-3-button--primary--inverted--default-color-text sd-7-0-0-next-3-button--primary--inverted--default-color-background border-white hover:sd-7-0-0-next-3-button--primary--inverted--hover-color-text active:sd-7-0-0-next-3-button--primary--inverted--active-color-text active:sd-7-0-0-next-3-button--primary--inverted--active-color-background"}
+          disabled:sd-7-0-0-next-3-button--inverted--disabled-color-background disabled:text-white`,
+        secondary: !this.inverted ? `border sd-7-0-0-next-3-button-border-width ${this.visuallyDisabled ? "sd-7-0-0-next-3-button--secondary--disabled-color-text sd-7-0-0-next-3-button--secondary--disabled-color-border" : "sd-7-0-0-next-3-button--secondary--default-color-text sd-7-0-0-next-3-button--secondary--default-color-border hover:sd-7-0-0-next-3-button--secondary--hover-color-text hover:sd-7-0-0-next-3-button--secondary--hover-color-border active:sd-7-0-0-next-3-button--secondary--active-color-text active:sd-7-0-0-next-3-button--secondary--active-color-border"}
+          disabled:sd-7-0-0-next-3-button--secondary--disabled-color-text disabled:sd-7-0-0-next-3-button--secondary--disabled-color-border` : `border sd-7-0-0-next-3-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-7-0-0-next-3-button--secondary--inverted-color-text sd-7-0-0-next-3-button--secondary--inverted-color-border hover:sd-7-0-0-next-3-button--secondary--inverted-color-border hover:sd-7-0-0-next-3-button--secondary--inverted--hover-color-text hover:sd-7-0-0-next-3-button--secondary--inverted--hover-color-background active:sd-7-0-0-next-3-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-7-0-0-next-3-button--secondary--inverted--active-color-background"}
+          disabled:sd-7-0-0-next-3-button--inverted--disabled-color-border disabled:sd-7-0-0-next-3-button--inverted--disabled-color-text`,
+        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-7-0-0-next-3-button--tertiary--disabled-color-text" : "sd-7-0-0-next-3-button--tertiary--default-color-text hover:sd-7-0-0-next-3-button--tertiary--hover-color-text active:sd-7-0-0-next-3-button--tertiary--active-color-text"}
+          disabled:sd-7-0-0-next-3-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-7-0-0-next-3-button--tertiary--inverted-color-text hover:sd-7-0-0-next-3-button--tertiary--inverted--hover-color-text hover:sd-7-0-0-next-3-button--tertiary--inverted--hover-color-background active:sd-7-0-0-next-3-button--tertiary--inverted--active-color-background active:sd-7-0-0-next-3-button--tertiary--inverted--active-color-text"}
+          disabled:sd-7-0-0-next-3-button--inverted--disabled-color-text`,
+        cta: `${this.visuallyDisabled ? "sd-7-0-0-next-3-button--primary--disabled-color-background border-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
+          ${!this.inverted ? "text-white bg-accent disabled:sd-7-0-0-next-3-button--primary--disabled-color-background hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-7-0-0-next-3-button--cta--inverted--default-color-background sd-7-0-0-next-3-button--cta--inverted--default-color-text hover:sd-7-0-0-next-3-button--cta--inverted--hover-color-text active:sd-7-0-0-next-3-button--cta--inverted--active-color-text disabled:sd-7-0-0-next-3-button--inverted--disabled-color-background disabled:text-white"}`
       }[this.variant]
     )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
       "absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
       (this.disabled || this.visuallyDisabled) && "hidden",
       {
         /* sizes, fonts */
-        sm: `sd-7-0-0-next-2-button-border-radius`,
-        md: `sd-7-0-0-next-2-button-border-radius`,
-        lg: `sd-7-0-0-next-2-button-border-radius`
+        sm: `sd-7-0-0-next-3-button-border-radius`,
+        md: `sd-7-0-0-next-3-button-border-radius`,
+        lg: `sd-7-0-0-next-3-button-border-radius`
       }[this.size]
     )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
       "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
       {
-        primary: !this.inverted ? "sd-7-0-0-next-2-button--primary--hover-color-background group-active:sd-7-0-0-next-2-button--primary--active-color-background" : "sd-7-0-0-next-2-button--primary--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-7-0-0-next-2-button--secondary--hover-color-background group-active:sd-7-0-0-next-2-button--secondary--active-color-background" : "sd-7-0-0-next-2-button--secondary--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--secondary--inverted--active-color-background group-active:sd-7-0-0-next-2-button--secondary--inverted--active-color-text",
-        tertiary: !this.inverted ? "sd-7-0-0-next-2-button--tertiary--hover-color-background group-active:sd-7-0-0-next-2-button--tertiary--active-color-background" : "sd-7-0-0-next-2-button--tertiary--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--tertiary--inverted--active-color-background group-active:sd-7-0-0-next-2-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-7-0-0-next-2-button--cta--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--cta--inverted--active-color-background"
+        primary: !this.inverted ? "sd-7-0-0-next-3-button--primary--hover-color-background group-active:sd-7-0-0-next-3-button--primary--active-color-background" : "sd-7-0-0-next-3-button--primary--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--primary--inverted--active-color-background",
+        secondary: !this.inverted ? "sd-7-0-0-next-3-button--secondary--hover-color-background group-active:sd-7-0-0-next-3-button--secondary--active-color-background" : "sd-7-0-0-next-3-button--secondary--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--secondary--inverted--active-color-background group-active:sd-7-0-0-next-3-button--secondary--inverted--active-color-text",
+        tertiary: !this.inverted ? "sd-7-0-0-next-3-button--tertiary--hover-color-background group-active:sd-7-0-0-next-3-button--tertiary--active-color-background" : "sd-7-0-0-next-3-button--tertiary--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--tertiary--inverted--active-color-background group-active:sd-7-0-0-next-3-button--tertiary--inverted--active-color-text",
+        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-7-0-0-next-3-button--cta--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--cta--inverted--active-color-background"
       }[this.variant]
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
       {
-        primary: !this.inverted ? "sd-7-0-0-next-2-button--primary--hover-color-background group-active:sd-7-0-0-next-2-button--primary--active-color-background" : "sd-7-0-0-next-2-button--primary--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-7-0-0-next-2-button--secondary--hover-color-background group-active:sd-7-0-0-next-2-button--secondary--active-color-background" : "sd-7-0-0-next-2-button--secondary--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--secondary--inverted--active-color-background group-active:sd-7-0-0-next-2-button--secondary--inverted--active-color-text group-active:sd-7-0-0-next-2-button--secondary--active-color-border",
-        tertiary: !this.inverted ? "sd-7-0-0-next-2-button--tertiary--hover-color-background group-active:sd-7-0-0-next-2-button--tertiary--active-color-background" : "sd-7-0-0-next-2-button--tertiary--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--tertiary--inverted--active-color-background group-active:sd-7-0-0-next-2-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-7-0-0-next-2-button--cta--inverted--hover-color-background group-active:sd-7-0-0-next-2-button--cta--inverted--active-color-background"
+        primary: !this.inverted ? "sd-7-0-0-next-3-button--primary--hover-color-background group-active:sd-7-0-0-next-3-button--primary--active-color-background" : "sd-7-0-0-next-3-button--primary--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--primary--inverted--active-color-background",
+        secondary: !this.inverted ? "sd-7-0-0-next-3-button--secondary--hover-color-background group-active:sd-7-0-0-next-3-button--secondary--active-color-background" : "sd-7-0-0-next-3-button--secondary--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--secondary--inverted--active-color-background group-active:sd-7-0-0-next-3-button--secondary--inverted--active-color-text group-active:sd-7-0-0-next-3-button--secondary--active-color-border",
+        tertiary: !this.inverted ? "sd-7-0-0-next-3-button--tertiary--hover-color-background group-active:sd-7-0-0-next-3-button--tertiary--active-color-background" : "sd-7-0-0-next-3-button--tertiary--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--tertiary--inverted--active-color-background group-active:sd-7-0-0-next-3-button--tertiary--inverted--active-color-text",
+        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-7-0-0-next-3-button--cta--inverted--hover-color-background group-active:sd-7-0-0-next-3-button--cta--inverted--active-color-background"
       }[this.variant]
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center justify-end pointer-events-none",
@@ -243,7 +243,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-7-0-0-next-2-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-7-0-0-next-2-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-7-0-0-next-3-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-7-0-0-next-3-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -252,13 +252,13 @@ var SdButton = class extends SolidElement {
 SdButton.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-7-0-0-next-2-badge){pointer-events:none;position:absolute;top:0;right:0;--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-7-0-0-next-2-icon),sd-7-0-0-next-2-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-7-0-0-next-2-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-7-0-0-next-2-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-7-0-0-next-2-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-7-0-0-next-2-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
+:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-7-0-0-next-3-badge){pointer-events:none;position:absolute;top:0;right:0;--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-7-0-0-next-3-icon),sd-7-0-0-next-3-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-7-0-0-next-3-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-7-0-0-next-3-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-7-0-0-next-3-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-7-0-0-next-3-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-7-0-0-next-2-icon" })
+  queryAssignedElements({ selector: "sd-7-0-0-next-3-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -324,7 +324,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-7-0-0-next-2-button")
+  customElement("sd-7-0-0-next-3-button")
 ], SdButton);
 export {

package/dist-versioned/chunks/chunk.TXBRN4WB.js CHANGED Viewed

@@ -57,13 +57,13 @@ var SdTeaser = class extends SolidElement {
       "teaser-has-headline": this.hasSlotController.test("headline")
     };
     return html`<div class="${cx(
-      "flex sd-7-0-0-next-2-teaser-border-radius",
+      "flex sd-7-0-0-next-3-teaser-border-radius",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-7-0-0-next-2-teaser--neutral-400-color-border",
-        "neutral-100": "sd-7-0-0-next-2-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-7-0-0-next-3-teaser--neutral-400-color-border",
+        "neutral-100": "sd-7-0-0-next-3-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-7-0-0-next-2-teaser--primary-100-color-background"
+        "primary-100": "sd-7-0-0-next-3-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-7-0-0-next-2-teaser")
+  customElement("sd-7-0-0-next-3-teaser")
 ], SdTeaser);
 export {

package/dist-versioned/chunks/chunk.U4QAR37W.js CHANGED Viewed

@@ -56,7 +56,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdLoader.prototype, "color", 2);
 SdLoader = __decorateClass([
-  customElement("sd-7-0-0-next-2-loader")
+  customElement("sd-7-0-0-next-3-loader")
 ], SdLoader);
 export {

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

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

package/dist-versioned/chunks/chunk.WCTYTU3K.js CHANGED Viewed

@@ -38,13 +38,13 @@ var SdBreadcrumbItem = class extends SolidElement {
     requestAnimationFrame(() => this.handleCurrentChange());
   }
   render() {
-    return html`<sd-7-0-0-next-2-link part="base" href="${ifDefined(!this.current ? this.href : void 0)}" target="${this.target}" standalone class="text-nowrap"><slot></slot></sd-7-0-0-next-2-link>`;
+    return html`<sd-7-0-0-next-3-link part="base" href="${ifDefined(!this.current ? this.href : void 0)}" target="${this.target}" standalone class="text-nowrap"><slot></slot></sd-7-0-0-next-3-link>`;
   }
 };
 SdBreadcrumbItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:inline-flex;align-items:center}sd-7-0-0-next-2-link::part(base){align-items:center}sd-7-0-0-next-2-link::part(icon-left){margin-right:0;display:inline-flex}:host([current]) sd-7-0-0-next-2-link::part(base){color:rgba(var(--sd-breadcrumb--current-color-text,rgba(var(--sd-color-neutral-700))))}:host([current]) sd-7-0-0-next-2-link::part(label){text-decoration-line:none}`
+:host{display:inline-flex;align-items:center}sd-7-0-0-next-3-link::part(base){align-items:center}sd-7-0-0-next-3-link::part(icon-left){margin-right:0;display:inline-flex}:host([current]) sd-7-0-0-next-3-link::part(base){color:rgba(var(--sd-breadcrumb--current-color-text,rgba(var(--sd-color-neutral-700))))}:host([current]) sd-7-0-0-next-3-link::part(label){text-decoration-line:none}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -62,7 +62,7 @@ __decorateClass([
   watch("current")
 ], SdBreadcrumbItem.prototype, "handleCurrentChange", 1);
 SdBreadcrumbItem = __decorateClass([
-  customElement("sd-7-0-0-next-2-breadcrumb-item")
+  customElement("sd-7-0-0-next-3-breadcrumb-item")
 ], SdBreadcrumbItem);
 export {

package/dist-versioned/chunks/chunk.WD6OT624.js CHANGED Viewed

@@ -45,10 +45,10 @@ var SdTeaserMedia = class extends SolidElement {
     )}"></div><div class="${cx("relative", ["primary", "gradient-dark"].includes(this.variant) && "text-white")}"><div class="${cx(
       "absolute inset-0 pointer-events-none",
       {
-        white: "sd-7-0-0-next-2-teaser-media--white-color-background group-hover:sd-7-0-0-next-2-teaser-media--white--hover-color-background ",
-        "neutral-100": "sd-7-0-0-next-2-teaser-media--neutral-100-color-background group-hover:sd-7-0-0-next-2-teaser-media--neutral-100--hover-color-background",
+        white: "sd-7-0-0-next-3-teaser-media--white-color-background group-hover:sd-7-0-0-next-3-teaser-media--white--hover-color-background ",
+        "neutral-100": "sd-7-0-0-next-3-teaser-media--neutral-100-color-background group-hover:sd-7-0-0-next-3-teaser-media--neutral-100--hover-color-background",
         primary: "bg-primary/80 text-white group-hover:bg-primary/90",
-        "primary-100": "sd-7-0-0-next-2-teaser-media--primary-100-color-background group-hover:sd-7-0-0-next-2-teaser-media--primary-100--hover-color-background",
+        "primary-100": "sd-7-0-0-next-3-teaser-media--primary-100-color-background group-hover:sd-7-0-0-next-3-teaser-media--primary-100--hover-color-background",
         "gradient-light": "bg-gradient-to-t from-white/75 to-white/60",
         "gradient-dark": "bg-gradient-to-t from-primary-800/75 to-primary-800/60"
       }[this.variant]
@@ -58,8 +58,8 @@ var SdTeaserMedia = class extends SolidElement {
       this.open ? "opacity-100" : "opacity-0"
     )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div>${slots["teaser-has-expandable"] ? html`<button part="toggle" class="${cx(
       "mt-2",
-      ["primary", "gradient-dark"].includes(this.variant) ? "text-white" : "sd-7-0-0-next-2-teaser-media-color-icon-fill"
-    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}" aria-label="${this.open ? "Collapse content" : "Expand content"}"><div class="h-full justify-start flex items-start"><sd-7-0-0-next-2-icon class="${cx("w-6 h-6 transition-transform", this.open && "rotate-180")}" library="_internal" name="chevron-down"></sd-7-0-0-next-2-icon></div></button>` : null}</div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
+      ["primary", "gradient-dark"].includes(this.variant) ? "text-white" : "sd-7-0-0-next-3-teaser-media-color-icon-fill"
+    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}" aria-label="${this.open ? "Collapse content" : "Expand content"}"><div class="h-full justify-start flex items-start"><sd-7-0-0-next-3-icon class="${cx("w-6 h-6 transition-transform", this.open && "rotate-180")}" library="_internal" name="chevron-down"></sd-7-0-0-next-3-icon></div></button>` : null}</div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
   }
 };
 SdTeaserMedia.styles = [
@@ -80,7 +80,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-7-0-0-next-2-teaser-media")
+  customElement("sd-7-0-0-next-3-teaser-media")
 ], SdTeaserMedia);
 export {

package/dist-versioned/chunks/chunk.WJFZKOMO.js CHANGED Viewed

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

package/dist-versioned/chunks/chunk.X6ZZWTS7.js CHANGED Viewed

@@ -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-7-0-0-next-2-icon id="default-play-icon" library="_internal" name="start"></sd-7-0-0-next-2-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-7-0-0-next-3-icon id="default-play-icon" library="_internal" name="start"></sd-7-0-0-next-3-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-7-0-0-next-2-video")
+  customElement("sd-7-0-0-next-3-video")
 ], SdVideo);
 export {

package/dist-versioned/chunks/chunk.XUYPFGE4.js CHANGED Viewed

@@ -58,16 +58,16 @@ var SdMapMarker = class extends SolidElement {
       this.variant === "cluster" && this.state === "hover" && "scale-110",
       this.variant === "cluster" && !this.notInteractive && "transition-transform duration-fast ease-in-out hover:scale-110",
       {
-        cluster: "sd-7-0-0-next-2-map-marker--cluster-color-text",
+        cluster: "sd-7-0-0-next-3-map-marker--cluster-color-text",
         main: "sd-color-fill-accent",
-        place: "sd-7-0-0-next-2-map-marker--pin-color-text"
+        place: "sd-7-0-0-next-3-map-marker--pin-color-text"
       }[this.variant]
     )}"><div id="motion-wrapper" part="motion-wrapper" class="${cx(
       "absolute inset-0 overflow-hidden pointer-events-none",
       {
-        cluster: "sd-7-0-0-next-2-map-marker--cluster--default-color-background group-hover:sd-7-0-0-next-2-map-marker--cluster--hover-color-background",
-        main: "sd-7-0-0-next-2-map-marker--main-color-background",
-        place: "sd-7-0-0-next-2-map-marker--pin--default-color-background"
+        cluster: "sd-7-0-0-next-3-map-marker--cluster--default-color-background group-hover:sd-7-0-0-next-3-map-marker--cluster--hover-color-background",
+        main: "sd-7-0-0-next-3-map-marker--main-color-background",
+        place: "sd-7-0-0-next-3-map-marker--pin--default-color-background"
       }[this.variant]
     )}" style="mask-image:${mask};-webkit-mask-image:${mask}"><div class="${cx(
       "absolute inset-0 transition-transform ease-in-out duration-fast translate-y-full group-hover:translate-y-0 group-active:translate-y-0",
@@ -77,15 +77,15 @@ var SdMapMarker = class extends SolidElement {
       {
         cluster: "",
         main: this.state === "active" ? "bg-accent-700" : this.state === "hover" ? "bg-accent-550" : "group-hover:bg-accent-550 group-active:bg-accent-700",
-        place: this.state === "active" || this.state === "hover" ? "sd-7-0-0-next-2-map-marker--pin--hover-color-background" : "group-active:bg-primary-200"
+        place: this.state === "active" || this.state === "hover" ? "sd-7-0-0-next-3-map-marker--pin--hover-color-background" : "group-active:bg-primary-200"
       }[this.variant]
     )}"></div></div>${this.variant === "main" ? html`<div id="marker-circle" class="absolute rounded-full"></div>` : ""}</div>${marker} ${this.variant === "cluster" ? html`<div id="cluster-border" class="${cx(
-      "absolute inset-0 sd-7-0-0-next-2-map-marker--cluster--default-color-background rounded-full opacity-30 hover:sd-7-0-0-next-2-map-marker--cluster--hover-color-background",
-      this.state === "hover" && "sd-7-0-0-next-2-map-marker--cluster--hover-color-background"
+      "absolute inset-0 sd-7-0-0-next-3-map-marker--cluster--default-color-background rounded-full opacity-30 hover:sd-7-0-0-next-3-map-marker--cluster--hover-color-background",
+      this.state === "hover" && "sd-7-0-0-next-3-map-marker--cluster--hover-color-background"
     )}"></div>` : ""}</div><div id="content" part="content" class="${cx(
       "absolute self-center pointer-events-none",
-      this.variant === "cluster" && "font-bold sd-7-0-0-next-2-map-marker--cluster-color-text",
-      this.variant === "place" && "font-bold sd-7-0-0-next-2-map-marker--pin-color-text"
+      this.variant === "cluster" && "font-bold sd-7-0-0-next-3-map-marker--cluster-color-text",
+      this.variant === "place" && "font-bold sd-7-0-0-next-3-map-marker--pin-color-text"
     )}"><slot></slot></div></${tag}>`;
   }
 };
@@ -119,7 +119,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-7-0-0-next-2-map-marker")
+  customElement("sd-7-0-0-next-3-map-marker")
 ], SdMapMarker);
 export {

package/dist-versioned/chunks/chunk.XZHZDSPQ.js CHANGED Viewed

@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-7-0-0-next-2-include")
+  customElement("sd-7-0-0-next-3-include")
 ], SdInclude);
 export {

package/dist-versioned/chunks/chunk.Y32GRFGF.js CHANGED Viewed

@@ -20,7 +20,7 @@ var SdRangeTick = class extends SolidElement {
     this.subtick = false;
   }
   render() {
-    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-7-0-0-next-2-range-scale-ticks-color-text"><slot></slot></div></div>`;
+    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-7-0-0-next-3-range-scale-ticks-color-text"><slot></slot></div></div>`;
   }
 };
 SdRangeTick.styles = [
@@ -32,7 +32,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRangeTick.prototype, "subtick", 2);
 SdRangeTick = __decorateClass([
-  customElement("sd-7-0-0-next-2-range-tick")
+  customElement("sd-7-0-0-next-3-range-tick")
 ], SdRangeTick);
 export {