@solid-design-system/components 4.6.18 → 4.7.1

package/dist/chunks/{chunk.EY4JPJJQ.js → chunk.25AH7KN2.js}

@@ -4,13 +4,22 @@ import {
 } from "./chunk.S3NI7NKU.js";
 
 // src/internal/animate.ts
+function cssVar(expression, el) {
+  const match = /var\((--[\w-]+)(?:,\s*([^)]+))?\)/.exec(expression);
+  if (!match) return expression;
+  const [, variable, fallback] = match;
+  const value = getComputedStyle(el).getPropertyValue(variable).trim();
+  return value || fallback || "";
+}
 function animateTo(el, keyframes, options) {
   return new Promise((resolve) => {
     if ((options == null ? void 0 : options.duration) === Infinity) {
       throw new Error("Promise-based animations must be finite.");
     }
+    const reducedMotion = prefersReducedMotion();
+    const duration = typeof options.duration === "string" ? parseDuration(cssVar(options.duration, el)) : options.duration;
     const animation = el.animate(keyframes, __spreadProps(__spreadValues({}, options), {
-      duration: prefersReducedMotion() ? 0 : options.duration
+      duration: reducedMotion && (options == null ? void 0 : options.reducedMotion) !== "allow" ? 0 : duration
     }));
     animation.addEventListener("cancel", resolve, { once: true });
     animation.addEventListener("finish", resolve, { once: true });
@@ -49,6 +58,7 @@ function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
 }
 
 export {
+  cssVar,
   animateTo,
   parseDuration,
   prefersReducedMotion,

package/dist/chunks/{chunk.SLGJ34KM.js → chunk.34ZYNTK2.js}

@@ -10,10 +10,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -29,7 +25,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -65,6 +65,9 @@ var SdDialog = class extends SolidElement {
     super.disconnectedCallback();
     unlockBodyScrolling(this);
   }
+  get prefersReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
   requestClose(source) {
     const sdRequestClose = this.emit("sd-request-close", {
       cancelable: true,
@@ -115,7 +118,7 @@ var SdDialog = class extends SolidElement {
           autoFocusTarget.setAttribute("autofocus", "");
         }
       });
-      const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.show", { dir: this.localize.dir() });
       const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
@@ -127,7 +130,7 @@ var SdDialog = class extends SolidElement {
       this.removeOpenListeners();
       this.modal.deactivate();
       await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
       const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
@@ -204,17 +207,25 @@ SdDialog = __decorateClass([
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 0, transform: "translate(-50%, 100%)" },
+    { opacity: 1, transform: "translate(0, 0)" }
   ],
-  options: { duration: 250, easing: "ease" }
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
+});
+setDefaultAnimation("dialog.showReducedMotion", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 setDefaultAnimation("dialog.hide", {
   keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 1, transform: "translate(0, 0)" },
+    { opacity: 0, transform: "translate(50%, -100%)" }
   ],
-  options: { duration: 250, easing: "ease" }
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
+});
+setDefaultAnimation("dialog.hideReducedMotion", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 setDefaultAnimation("dialog.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
@@ -222,11 +233,11 @@ setDefaultAnimation("dialog.denyClose", {
 });
 setDefaultAnimation("dialog.overlay.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 250 }
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 setDefaultAnimation("dialog.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 250 }
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
 
 export {

package/dist/chunks/{chunk.EEICCCWB.js → chunk.4JMANJQA.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -149,9 +149,9 @@ var SdButton = class extends SolidElement {
       "icon-only": this._iconsInDefaultSlot.length > 0
     };
     return html`<${tag} part="base" class="${cx(
-      `font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
+      `group relative z-10 font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
         w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center
-        border transition-colors duration-200 ease-in-out rounded-default
+        transition-colors duration-fast ease-in-out rounded-default
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
@@ -168,19 +168,38 @@ var SdButton = class extends SolidElement {
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `text-white border-transparent ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 hover:bg-neutral-500" : "bg-primary hover:bg-primary-500 hover:text-primary-100 active:text-primary-200 active:bg-primary-800"}
-          disabled:bg-neutral-500` : `border-transparent ${this.visuallyDisabled ? "bg-neutral-500 text-white hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white hover:text-primary-500 hover:bg-primary-100 active:text-primary-800 active:bg-primary-200"}
+        primary: !this.inverted ? `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500" : "bg-primary hover:text-primary-100 active:text-primary-200"}
+          disabled:bg-neutral-500` : `${this.visuallyDisabled ? "bg-neutral-500 text-white hover:bg-neutral-500 active:bg-neutral-500" : "text-primary bg-white hover:text-primary-500 active:text-primary-800"}
           disabled:bg-neutral-600 disabled:text-white`,
-        secondary: !this.inverted ? `${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100 active:text-primary-800 active:border-primary-800 active:bg-primary-200"}
-          disabled:text-neutral-500 disabled:border-neutral-500` : `${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100 active:text-primary-200 active:bg-primary-800 active:border-primary-200"}
+        secondary: !this.inverted ? `border ${this.visuallyDisabled ? "text-neutral-500 border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "text-primary border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
+          disabled:text-neutral-500 disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white border-white hover:text-primary-100 hover:border-primary-100 active:text-primary-200"}
           disabled:text-neutral-600 disabled:border-neutral-600`,
-        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 hover:bg-primary-100 active:text-primary-800 active:bg-primary-200"}
-          disabled:text-neutral-500` : `border-transparent ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 hover:bg-primary-500 active:text-primary-200 active:bg-primary-800"}
+        tertiary: !this.inverted ? `${this.visuallyDisabled ? "text-neutral-500 hover:text-neutral-500 active:text-neutral-500" : "text-primary hover:text-primary-500 active:text-primary-800"}
+          disabled:text-neutral-500` : `${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:text-primary-100 active:text-primary-200"}
           disabled:text-neutral-600`,
-        cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500 border-transparent hover:bg-accent-550 active:bg-accent-700"}
+        cta: `text-white ${this.visuallyDisabled ? "bg-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent-500"}
           ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} 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}"><slot name="icon-left" part="icon-left" class="${cx(
+    )}" ?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 rounded-default -z-10 overflow-hidden pointer-events-none ",
+      (this.disabled || this.visuallyDisabled) && "hidden"
+    )}"><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 ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
+        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        cta: "bg-accent-550 group-active:bg-accent-700"
+      }[this.variant]
+    )}"></div><div class="${cx(
+      "absolute w-full h-full mt-[22%]",
+      {
+        primary: !this.inverted ? "bg-primary-500 group-active:bg-primary-800" : "bg-primary-100 group-active:bg-primary-200",
+        secondary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        tertiary: !this.inverted ? "bg-primary-100 group-active:bg-primary-200" : "bg-primary-500 group-active:bg-primary-800",
+        cta: "bg-accent-550 group-active:bg-accent-700"
+      }[this.variant]
+    )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       slots["icon-only"] && "hidden",
       this.loading && "invisible",

package/dist/chunks/{chunk.O7I7F6Q2.js → chunk.52C5F7DJ.js}

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

package/dist/chunks/{chunk.DWHZP4ID.js → chunk.56N3RSAE.js}

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

package/dist/chunks/{chunk.TQJ46AIM.js → chunk.5JQXTFQP.js}

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

package/dist/chunks/{chunk.L33EWCI5.js → chunk.5U2SJOTV.js}

@@ -8,10 +8,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -30,7 +26,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -585,7 +585,7 @@ var SdSelect = class extends SolidElement {
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
     )}"><span class="sr-only" aria-live="polite">${this.deletedTagLabel}</span> ${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
-      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10",
+      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10 transition-[colors,border-width] duration-fast ease-in-out",
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
@@ -622,14 +622,14 @@ var SdSelect = class extends SolidElement {
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
     )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700 z-10", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
-      "inline-flex ml-2 transition-all items-center",
+      "inline-flex ml-2 transition-all items-center transition-transform duration-medium ease-in-out",
       this.open ? "rotate-180" : "rotate-0",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
     )}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-icon></slot></div><button part="combobox" class="${cx(
       "relative w-full px-4 flex flex-row items-center rounded-default focus-visible:outline-none",
       cursorStyles,
-      this.open && "shadow",
+      this.open && "shadow transition-shadow duration-medium ease-in-out",
       {
         sm: "min-h-[32px]",
         md: "min-h-[40px]",
@@ -637,7 +637,7 @@ var SdSelect = class extends SolidElement {
       }[this.size]
     )}" type="button" @keydown="${this.handleComboboxKeyDown}" @mousedown="${this.handleComboboxMouseDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" aria-labelledby="label"></button></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
-      this.open && "shadow",
+      this.open && "shadow transition-shadow duration-medium ease-in-out",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
     )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700 mt-2" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
@@ -781,18 +781,12 @@ SdSelect = __decorateClass([
   customElement("sd-select")
 ], SdSelect);
 setDefaultAnimation("select.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
 });
 setDefaultAnimation("select.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
 });
 
 export {

package/dist/chunks/{chunk.F6XYVX4T.js → chunk.5WACQD2F.js}

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

package/dist/chunks/{chunk.TG3K5WND.js → chunk.6ZPX5OTF.js}

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

package/dist/chunks/{chunk.YEECK5EL.js → chunk.72UMKQ7O.js}

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

package/dist/chunks/{chunk.5EBZIKYH.js → chunk.CFQBV5W2.js}

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

package/dist/chunks/{chunk.V5S3KO2G.js → chunk.CO7QX2EW.js}

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

package/dist/chunks/{chunk.5FSG57H2.js → chunk.DHAZFPCB.js}

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

package/dist/chunks/{chunk.2LMWBUBT.js → chunk.DLBXYZN6.js}

@@ -1,12 +1,12 @@
 import {
   debounce
 } from "./chunk.NOWCQZBS.js";
-import {
-  prefersReducedMotion
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
+import {
+  prefersReducedMotion
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.S4EWMXGX.js → chunk.DO3SM5IZ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.H7LBUXAT.js → chunk.DROA7RNH.js}

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

package/dist/chunks/{chunk.KWTDQ4KK.js → chunk.ESXXYVU6.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -75,7 +75,7 @@ var SdOption = class extends SolidElement {
       right: this.hasSlotController.test("right")
     };
     return html`<div part="base" class="${cx(
-      "px-4 flex items-center w-full transition-all text-left text-base relative text-black",
+      "px-4 flex items-center w-full transition-colors duration-fast ease-in-out text-left text-base relative text-black",
       {
         sm: "text-sm py-1",
         md: "text-base py-2",
@@ -86,7 +86,7 @@ var SdOption = class extends SolidElement {
       this.isKeyboardFocus ? "focus-outline focus-outline-offset" : "",
       this.current && "bg-neutral-200"
     )}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}"><span class="${cx(
-      "absolute w-full left-0 top-0 pointer-events-none transition-all duration-150 border-l-4 h-[calc(100%-8px)]",
+      "absolute w-full left-0 top-0 pointer-events-none transition-[height,top] duration-fast ease-in-out border-l-4 h-[calc(100%-8px)]",
       this.selected && !this.checkbox ? "border-accent" : "border-transparent",
       this.disabled && "border-neutral-500 top-1",
       !this.disabled && this.hasHover ? "h-full top-0" : "top-1"

package/dist/chunks/{chunk.HYV22M4U.js → chunk.FJRN44TA.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6WYL4JXU.js → chunk.FPGTELPD.js}

@@ -3,13 +3,10 @@ import {
 } from "./chunk.F4VGSDIW.js";
 import {
   ScrollController
-} from "./chunk.2LMWBUBT.js";
+} from "./chunk.DLBXYZN6.js";
 import {
   SdCarouselItem
-} from "./chunk.F3R45NNC.js";
-import {
-  prefersReducedMotion
-} from "./chunk.EY4JPJJQ.js";
+} from "./chunk.M6SZ7ZI5.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -19,7 +16,10 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  prefersReducedMotion
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -374,7 +374,7 @@ var SdCarousel = class extends SolidElement {
       `overscroll-x-contain grid-flow-col auto-rows-[100%]
             snap-x snap-mandatory overflow-y-hidden`
     )}" style="--slides-per-page:${this.slidesPerPage}" aria-busy="${scrollController.scrolling ? "true" : "false"}" aria-label="${this.localize.term("carouselContainer", this.slides.length)}" aria-live="${this.autoplay ? "off" : "polite"}" tabindex="0" @keydown="${this.handleKeyDown}" @scrollend="${this.handleScrollEnd}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><slot></slot></div><div part="controls" class="${cx("w-full flex items-center justify-center relative")}"><div part="navigation" class="${cx("carousel__navigation flex items-center justify-center")}"><button part="navigation-button navigation-button--previous" id="carousel__navigation-button--previous" ?disabled="${!prevEnabled ? true : false}" class="${cx(
-      "!mr-6 !rounded-sm sd-interactive",
+      "!mr-6 !rounded-sm sd-interactive transition-colors duration-fast ease-in-out",
       !prevEnabled && "sd-interactive--disabled",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${prevEnabled ? (e) => {
@@ -391,13 +391,13 @@ var SdCarousel = class extends SolidElement {
         this.goToSlide(index * slidesPerMove);
         this.unblockAutoplay(e, this.paginationItems[index]);
       }}" @keydown="${this.handleKeyDown}"><span class="${cx(
-        "h-4 w-4 block border hover:border-primary-500 rounded-full",
+        "h-4 w-4 block border hover:border-primary-500 rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
         this.inverted ? "border-white hover:border-primary-500" : "border-primary",
         isActive && "bg-accent border-none",
         isActive ? this.inverted ? "hover:bg-accent-300" : "hover:bg-accent-550" : ""
       )}"></span></button>`;
     })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
-      "!ml-6 !rounded-sm sd-interactive ",
+      "!ml-6 !rounded-sm sd-interactive transition-colors duration-fast ease-in-out",
       !nextEnabled && "sd-interactive--disabled",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${nextEnabled ? (e) => {

package/dist/chunks/{chunk.LBJZBVP4.js → chunk.GLUFF74G.js}

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

package/dist/chunks/{chunk.ERSYOXHV.js → chunk.IQ7IQWIB.js}

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

package/dist/chunks/{chunk.W5O6ZSSQ.js → chunk.J7W7ZOQO.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.PVLYUNK7.js";
+} from "./chunk.Z7FOHDKA.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.3FCEMGCI.js → chunk.JB2C7BEZ.js}

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