npm - @solid-design-system/components - Versions diffs - 6.28.2 → 6.29.0 - Mend

@solid-design-system/components 6.28.2 → 6.29.0

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 (645) hide show

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

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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.OMFSAQHZ.js → chunk.E7TO66OI.js} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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.O23ZIMK6.js → chunk.SRHXZUZH.js} RENAMED Viewed

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

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

@@ -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} RENAMED Viewed

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