@solid-design-system/components 4.6.18 → 4.7.0

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.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";

package/dist/chunks/{chunk.CNYF5RAM.js → chunk.JMF35STD.js}

@@ -17,10 +17,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -39,7 +35,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";
@@ -776,7 +776,7 @@ var SdCombobox = class extends SolidElement {
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
     )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2"}" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> <span aria-live="polite" class="sr-only">${this.deletedTagLabel}</span><div part="form-control-input" class="relative w-full bg-white 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",
@@ -797,7 +797,7 @@ var SdCombobox = class extends SolidElement {
             "><div part="combobox" class="${cx(
       "relative w-full px-4 flex flex-row items-center rounded-default",
       this.visuallyDisabled || this.disabled ? "hover:bg-transparent" : "hover:bg-neutral-200",
-      this.open && "shadow",
+      this.open && "shadow transition-shadow duration-medium ease-in-out",
       {
         sm: "py-1 min-h-[32px]",
         md: "py-1 min-h-[40px]",
@@ -815,9 +815,12 @@ var SdCombobox = class extends SolidElement {
       "inline-flex ml-2 leading-[0]",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
-    )}">${this.type !== "search" ? html`<sd-icon class="${cx("transition-all", this.open ? "rotate-180" : "rotate-0")}" name="chevron-down" part="chevron" library="system" color="currentColor" label="${this.localize.term("open")}"></sd-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
+    )}">${this.type !== "search" ? html`<sd-icon class="${cx(
+      "transition-transform duration-medium ease-in-out",
+      this.open ? "rotate-180" : "rotate-0"
+    )}" name="chevron-down" part="chevron" library="system" color="currentColor" label="${this.localize.term("open")}"></sd-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" 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" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
@@ -988,18 +991,12 @@ SdCombobox = __decorateClass([
   customElement("sd-combobox")
 ], SdCombobox);
 setDefaultAnimation("combobox.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("combobox.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.4ASHVYWQ.js → chunk.KALJB7Q2.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.KHQD2N5S.js → chunk.KL3FS5YT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -102,14 +102,14 @@ var SdNavigationItem = class extends SolidElement {
       "cursor-pointer relative focus-visible:focus-outline",
       { md: "text-base", lg: "text-lg", sm: "text-[14px]" }[this.size],
       this.disabled ? "text-neutral-500 pointer-events-none" : "text-primary",
+      this.current && "font-bold",
       isAccordion ? "flex flex-col" : "inline-block w-full",
       this.divider && this.vertical && "mt-0.25",
       !this.vertical && "inline-flex items-center",
-      !this.separated && "hover:bg-neutral-200 group transition-all min-h-[48px] px-4"
+      !this.separated && "hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px] px-4"
     )}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" 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="${isLink ? "link" : "button"}" tabindex="${this.disabled || this.separated ? "-1" : "0"}" @click="${this.separated ? void 0 : isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
-      "absolute left-0 pointer-events-none transition-all duration-150",
-      this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-full bottom-0",
-      this.current ? "bg-accent" : "bg-transparent",
+      "absolute bg-accent left-0 pointer-events-none",
+      this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-[calc(100%-16px)] bottom-0 left-2 group-hover:w-full group-hover:left-0",
       this.disabled && "bg-neutral-500"
     )}"></div><span part="content-area" class="${cx(
       "relative pt-3 inline-flex justify-between items-center",
@@ -117,7 +117,7 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
       this.calculatePaddingX
     )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
-      "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
+      "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px]",
       !slots["description"] && "py-4"
     )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
       "mr-4 h-6 w-6 transition-all",
@@ -145,7 +145,7 @@ var SdNavigationItem = class extends SolidElement {
  */
 SdNavigationItem.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0;--tw-scale-y:0;opacity:var(--sd-opacity-0,0);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:var(--sd-duration-fast,.15s);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:1;--tw-scale-y:1;opacity:var(--sd-opacity-100,1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}`
 ];
 __decorateClass([
   query('a[part="base"], button[part="base"]')

package/dist/chunks/{chunk.2B6KEGZJ.js → chunk.M3MSH2U2.js}

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