@solid-design-system/components 6.28.2 → 6.29.1

package/dist/chunks/{chunk.7NV3LXUY.js → chunk.2R6BV36X.js}

@@ -1,13 +1,13 @@
 import {
   SdAccordion
-} from "./chunk.755PXQIA.js";
+} from "./chunk.SUBKF7CK.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.SFM4G2VH.js → chunk.3SKQW3OF.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NBC65PZK.js → chunk.5JXNGWGO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TEAEYNBH.js → chunk.5LPEWRVH.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZU6ELXPY.js → chunk.67F53YIT.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HZWAYH5R.js → chunk.6A5KL2ME.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VW2V4NLW.js → chunk.6CQHWDTR.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.JLR5AD3J.js → chunk.73VNCNET.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.S4GPAGEW.js → chunk.7QCSVC6W.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.GGCHJ3RE.js → chunk.AQ2YHTJT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.IDKDUGLS.js → chunk.AQPWS7H5.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.7H7XOBSC.js → chunk.BHAJNYNR.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WPDX56YA.js → chunk.DANLADQA.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZA4YNDFN.js → chunk.DEKB47SU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.O23ZIMK6.js → chunk.DZ52GJMF.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -215,7 +215,7 @@ var SdNotification = class extends SolidElement {
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
-      error: "warning"
+      error: "risk"
     }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-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-notification-color-border",

package/dist/chunks/{chunk.OMFSAQHZ.js → chunk.E7TO66OI.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2NNMNH53.js → chunk.EVXE6QT5.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.WICZ7UUY.js → chunk.FGGJHWJQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.H2JFSSRW.js → chunk.G3YXVIXP.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.OT5PVYBU.js → chunk.G4M5E52C.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JZDVCSY3.js → chunk.GGTNOUL3.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.UG2CM4HI.js → chunk.GKK76LN5.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZAMS4KU3.js → chunk.J2IWPOVN.js}

@@ -17,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   parseDuration,

package/dist/chunks/{chunk.UO53RPFR.js → chunk.JZERVNQH.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.LFYHG4SF.js → chunk.KBLFP77D.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BSTRQDQV.js → chunk.KLDMZEUO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NL7DBE47.js → chunk.KOYTK43J.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.QOXHGCGA.js → chunk.KPKOJGRC.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BRDVS66Q.js → chunk.L3QZLYWI.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HC47LTMU.js → chunk.LCMQJOE7.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6HFU74YX.js → chunk.M74NHLSR.js}

@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.TN5OFWBT.js → chunk.NEPWG7EE.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.KQUNEIAM.js → chunk.NZOLXA5P.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HSAIWSZZ.js → chunk.OPHYFYBJ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TEUEZN5R.js → chunk.OVLIDOUF.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.UDRAHWK7.js → chunk.Q6BM6VB4.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.567ETKG6.js → chunk.QP6NYUMR.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.74U5JKZE.js → chunk.RM4W3RUJ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.UUSB6IKX.js → chunk.RZYQYD7F.js}

@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.LMUB7ILW.js → chunk.S7MVQQ7P.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6RE6UZ72.js";
 import {
   SdCarouselItem
-} from "./chunk.EEYDDF6R.js";
+} from "./chunk.WQ53PAAJ.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";

package/dist/chunks/{chunk.Q37EUQ5P.js → chunk.SFQPANQ4.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -37,6 +37,7 @@ var SdButton = class extends SolidElement {
     });
     this.hasSlotController = new HasSlotController(this, "[default]", "icon-left", "icon-right");
     this.invalid = false;
+    this.hasUiMotion = false;
     this.title = "";
     this.variant = "primary";
     this.inverted = false;
@@ -63,11 +64,22 @@ var SdButton = class extends SolidElement {
     }
     return "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateMotionTheme();
+  }
   firstUpdated() {
     if (this.isButton()) {
       this.formControlController.updateValidity();
     }
   }
+  onThemeChange() {
+    this.updateMotionTheme();
+  }
+  updateMotionTheme() {
+    const theme = getComputedStyle(this).getPropertyValue("--sd-theme").trim().replace(/['"]/g, "");
+    this.hasUiMotion = theme === "" || theme === "ui-light" || theme === "ui-dark";
+  }
   handleBlur() {
     this.emit("sd-blur");
   }
@@ -149,11 +161,42 @@ var SdButton = class extends SolidElement {
       "icon-only": this._iconsInDefaultSlot.length > 0
     };
     const hasBorder = this.variant === "secondary";
-    return html`<${tag} part="base" class="${cx(
+    const variantBackgroundColors = {
+      primary: this.inverted ? {
+        motionBackground: "sd-button--primary--inverted--hover-color-background group-active:sd-button--primary--inverted--active-color-background",
+        baseBackground: "hover:sd-button--primary--inverted--hover-color-background active:sd-button--primary--inverted--active-color-background"
+      } : {
+        motionBackground: "sd-button--primary--hover-color-background group-active:sd-button--primary--active-color-background",
+        baseBackground: "hover:sd-button--primary--hover-color-background active:sd-button--primary--active-color-background"
+      },
+      secondary: this.inverted ? {
+        motionBackground: "sd-button--secondary--inverted--hover-color-background group-active:sd-button--secondary--inverted--active-color-background group-active:sd-button--secondary--inverted--active-color-text",
+        baseBackground: "hover:sd-button--secondary--inverted--hover-color-background active:sd-button--secondary--inverted--active-color-background"
+      } : {
+        motionBackground: "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background",
+        baseBackground: "hover:sd-button--secondary--hover-color-background active:sd-button--secondary--active-color-background"
+      },
+      tertiary: this.inverted ? {
+        motionBackground: "sd-button--tertiary--inverted--hover-color-background group-active:sd-button--tertiary--inverted--active-color-background group-active:sd-button--tertiary--inverted--active-color-text",
+        baseBackground: "hover:sd-button--tertiary--inverted--hover-color-background active:sd-button--tertiary--inverted--active-color-background"
+      } : {
+        motionBackground: "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background",
+        baseBackground: "hover:sd-button--tertiary--hover-color-background active:sd-button--tertiary--active-color-background"
+      },
+      cta: this.inverted ? {
+        motionBackground: "sd-button--cta--inverted--hover-color-background group-active:sd-button--cta--inverted--active-color-background",
+        baseBackground: "hover:sd-button--cta--inverted--hover-color-background active:sd-button--cta--inverted--active-color-background"
+      } : {
+        motionBackground: "bg-accent-500 group-active:bg-accent-700",
+        baseBackground: "hover:bg-accent-500 active:bg-accent-700"
+      }
+    }[this.variant];
+    return html`<sd-theme-listener></sd-theme-listener><${tag} part="base" class="${cx(
       `group relative z-10 font-md no-underline
         w-full align-middle inline-flex items-stretch justify-center
         transition-colors duration-fast ease-in-out
         select-none cursor-[inherit]`,
+      !this.hasUiMotion && "sd-button--simple-motion",
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
@@ -179,21 +222,22 @@ var SdButton = class extends SolidElement {
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-button--primary--default-color-background border-transparent sd-button--primary--default-color-text hover:sd-button--primary--hover-color-text active:sd-button--primary--active-color-text active:sd-button--primary--active-color-background"}
-          disabled:sd-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-button--primary--inverted--default-color-text sd-button--primary--inverted--default-color-background border-white hover:sd-button--primary--inverted--hover-color-text active:sd-button--primary--inverted--active-color-text active:sd-button--primary--inverted--active-color-background"}
+        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-button--primary--default-color-background border-transparent sd-button--primary--default-color-text hover:sd-button--primary--hover-color-text active:sd-button--primary--active-color-text"}
+          disabled:sd-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-button--primary--inverted--default-color-text sd-button--primary--inverted--default-color-background border-white hover:sd-button--primary--inverted--hover-color-text active:sd-button--primary--inverted--active-color-text"}
           disabled:sd-button--inverted--disabled-color-background disabled:text-white`,
         secondary: !this.inverted ? `border sd-button-border-width ${this.visuallyDisabled ? "sd-button--secondary--disabled-color-text sd-button--secondary--disabled-color-border" : "sd-button--secondary--default-color-text sd-button--secondary--default-color-border hover:sd-button--secondary--hover-color-text hover:sd-button--secondary--hover-color-border active:sd-button--secondary--active-color-text active:sd-button--secondary--active-color-border"}
-          disabled:sd-button--secondary--disabled-color-text disabled:sd-button--secondary--disabled-color-border` : `border sd-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-button--secondary--inverted-color-text sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted--hover-color-text hover:sd-button--secondary--inverted--hover-color-background active:sd-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-button--secondary--inverted--active-color-background"}
+          disabled:sd-button--secondary--disabled-color-text disabled:sd-button--secondary--disabled-color-border` : `border sd-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-button--secondary--inverted-color-text sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted--hover-color-text active:sd-button--secondary--inverted--active-color-text active:border-primary-200"}
           disabled:sd-button--inverted--disabled-color-border disabled:sd-button--inverted--disabled-color-text`,
         tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-button--tertiary--disabled-color-text" : "sd-button--tertiary--default-color-text hover:sd-button--tertiary--hover-color-text active:sd-button--tertiary--active-color-text"}
-          disabled:sd-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-button--tertiary--inverted-color-text hover:sd-button--tertiary--inverted--hover-color-text hover:sd-button--tertiary--inverted--hover-color-background active:sd-button--tertiary--inverted--active-color-background active:sd-button--tertiary--inverted--active-color-text"}
+          disabled:sd-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-button--tertiary--inverted-color-text hover:sd-button--tertiary--inverted--hover-color-text active:sd-button--tertiary--inverted--active-color-text"}
           disabled:sd-button--inverted--disabled-color-text`,
-        cta: `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
-          ${!this.inverted ? "text-white bg-accent disabled:sd-button--primary--disabled-color-background hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-button--cta--inverted--default-color-background sd-button--cta--inverted--default-color-text hover:sd-button--cta--inverted--hover-color-text active:sd-button--cta--inverted--active-color-text disabled:sd-button--inverted--disabled-color-background disabled:text-white"}`
-      }[this.variant]
+        cta: `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500" : "border-transparent"}
+          ${!this.inverted ? "text-white bg-accent disabled:sd-button--primary--disabled-color-background disabled:border-neutral-500 disabled:text-white" : "sd-button--cta--inverted--default-color-background sd-button--cta--inverted--default-color-text hover:sd-button--cta--inverted--hover-color-text active:sd-button--cta--inverted--active-color-text disabled:sd-button--inverted--disabled-color-background disabled:text-white"}`
+      }[this.variant],
+      !this.hasUiMotion && !this.disabled && !this.visuallyDisabled && variantBackgroundColors.baseBackground
     )}" ?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",
+      (!this.hasUiMotion || this.disabled || this.visuallyDisabled) && "hidden",
       {
         /* sizes, fonts */
         sm: `sd-button-border-radius`,
@@ -202,20 +246,11 @@ var SdButton = class extends SolidElement {
       }[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-button--primary--hover-color-background group-active:sd-button--primary--active-color-background" : "sd-button--primary--inverted--hover-color-background group-active:sd-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background" : "sd-button--secondary--inverted--hover-color-background group-active:sd-button--secondary--inverted--active-color-background group-active:sd-button--secondary--inverted--active-color-text",
-        tertiary: !this.inverted ? "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background" : "sd-button--tertiary--inverted--hover-color-background group-active:sd-button--tertiary--inverted--active-color-background group-active:sd-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-button--cta--inverted--hover-color-background group-active:sd-button--cta--inverted--active-color-background"
-      }[this.variant]
+      variantBackgroundColors.motionBackground
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
-      {
-        primary: !this.inverted ? "sd-button--primary--hover-color-background group-active:sd-button--primary--active-color-background" : "sd-button--primary--inverted--hover-color-background group-active:sd-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background" : "sd-button--secondary--inverted--hover-color-background group-active:sd-button--secondary--inverted--active-color-background group-active:sd-button--secondary--inverted--active-color-text group-active:sd-button--secondary--active-color-border",
-        tertiary: !this.inverted ? "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background" : "sd-button--tertiary--inverted--hover-color-background group-active:sd-button--tertiary--inverted--active-color-background group-active:sd-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-button--cta--inverted--hover-color-background group-active:sd-button--cta--inverted--active-color-background"
-      }[this.variant]
+      variantBackgroundColors.motionBackground,
+      this.variant === "secondary" && this.inverted && "group-active:sd-button--secondary--active-color-border"
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center justify-end pointer-events-none",
       slots["icon-only"] && "hidden",
@@ -252,7 +287,7 @@ 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-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-icon),sd-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-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}.sd-button--simple-motion{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease}::slotted(sd-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-icon),sd-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-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")
@@ -263,6 +298,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], SdButton.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], SdButton.prototype, "hasUiMotion", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdButton.prototype, "title", 2);

package/dist/chunks/{chunk.OLB3TM54.js → chunk.SMXDKTQJ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.755PXQIA.js → chunk.SUBKF7CK.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.OMNG75M4.js → chunk.SZX2DZVG.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DXRLWSKI.js";
+} from "./chunk.T73O2TL3.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";